Formularios HTML dividirlo por pasos, jQuery

Revisando un poco la red, buscaba algo que me dividiera un formulario HTML en etapas o paso con el menor esfuerzo posible.
En la web de anieto2k he encontrado la solución a las cual le aplique un par de cambios para hacer validaciones y ha quedado muy buena. Está se utiliza con jQuery.
Simplemente es una función que se encarga de convertir todos los formularios cuyo atributo class sea “dividirPasos”. Únicamente se encarga de cortar el formulario por elementos <fieldset /> e implementar validaciones para cada uno de los pasos.

La función "stepForm" agrega los botones “Volver” y “Seguir“, asociando al evento Onclick un función pasando como parámetro el paso actual.

Función que aplica los pasos y las validaciones:

<script type="text/javascript">
  jQuery.extend({
      stepForm: function(txtBack, txtNext, token){
      var fieldsets = $((token || 'fieldset'), $("form.dividirPasos"));
      var total = $(fieldsets).length;
       $(fieldsets).each(function(x,el){
       if (x > 0) {
          $(el).hide();
          $(el).append('<a onClick="validarEtapaVolver('+(x)+')" href="#">'+ (txtBack || 'Volver') +'</a>');
       }
       if ((x+1)< total) {
          $(el).append('<a onClick="validarEtapaSiguiente('+(x)+')" href="#">'+ (txtNext || 'Seguir')+'</a>');
       }
        $(el).attr("id", "x_" + x);
    });
  }
});

function validarEtapaVolver(x){
    var volver = false;
    if(x == 0){
      alert("VOLVER: Validar la etapa 0");
      volver = true;
    }
    if(x == 1){
      alert("VOLVER: Validar la etapa 1");
      volver = true;
    }
    if(x == 2){
      alert("VOLVER: Validar la etapa 2");
      volver = true;
    }

   //SI TODO ES CORRECTO vuelvo una etapa
    if(volver){
       $("#x_" + (x-1)).show();
       $("#x_" + (x)).hide();
    }
}

function validarEtapaSiguiente(x){
    var sigue = false;
    if(x == 0){
      alert("SIGUIENTE: Validar la etapa 0");
      sigue = true;
    }
    if(x == 1){
      alert("SIGUIENTE: Validar la etapa 1");
      sigue= true;
    }
    if(x == 2){
       alert("SIGUIENTE: Validar la etapa 2");
       sigue = true;
    }

   //SI TODO ES CORRECTO voy a la siguiente etapa
    if(sigue){
       $("#x_" + (x+1)).show();
       $("#x_" + (x)).hide();
    }
}

//inicializador
   $(document).ready(function() {
      $.stepForm();
   });
</script>

Formulario HTML con los <fieldset /> :

<form name="form" action="" method="post" class="dividirPasos">
 <fieldset><!--paso 1-->
     <legend>Datos de Usuario</legend>
       <table>
         <tr>
            <td><label for="name">Nombre:</label></td>
            <td><input name="nombre" id="name" value="" /></td>
         </tr>
         <tr>
             <td><label for="surname">Apellidos:</label></td>
             <td><input name="apellidos" id="surname" value="" /></td>
         </tr>
         <tr>
             <td><label for="birthday">Fecha de Nacimiento:</label></td>
             <td><input name="apellidos" id="surname" value="" /></td>
         </tr>
         <tr>
             <td><label for="email">E-mail:</label></td>
             <td><input name="email" id="email" value="" /></td>
         </tr>
      </table>
 </fieldset>

 <fieldset><!--paso 2-->
    <legend>Otros Datos de Usuario</legend>
      <table>
        <tr>
           <td><label for="text1">Que te gusta?:</label> </td>
           <td>
                 <select    id="text1">
                      <option>gato</option>
                      <option>perro</option>
                      <option>chocolate</option>
                      <option>frutilla</option>
                 </select>
           </td>
        </tr>
        <tr>
           <td> <label for="text2">Tenes Hermanos: </label> </td>
           <td> Si?<input type="checkbox" id="text2" /> </td>
        </tr>
      </table>
 </fieldset>

 <fieldset><!--paso 3-->
    <legend>Último Paso  </legend>
       <label for="submit">Si estás seguro que completaste los datos de forma correcta, presiona el botón  Enviar<br /></label>
       <input    type="submit" id="submit" value="Enviar" /><br />
 </fieldset>

</form>

Enlaces de interés:

• Ejemplo Funcionando
• Descargar Ejemplo
• anieto2k
• Ejemplo planteado con MooTools

Saludos

promero

---

¿Disfrutaste esta entrada? Por qué no dejas un comentario abajo y continúas la conversación, o te suscríbes a mi feed y obtienes los artículos como este enviados automáticamente cada día hacia tu lector de feeds.

13 de Septiembre | Potenciado por WordPress | ElegantBlue es un tema modificado por Nathan Rice y traducido por Trazos Web