Tengo que dar las gracias a http://www.13deseptiembre.com.ar/blog/?p=568 por que gracias a su magnifica modificacion pude lograr juntar stepForm y Validation Engine
Pues siguen el tuto de Formularios HTML dividirlo por pasos, una vez que lo tengan solo tienen que poner esto en el js, esto es lo que yo modifique
Código:
y en su HTML solo ponen el un div con la siguiente clase seccion1, la clase cambia dependiendo de como hayan separado ustedes ejemplojQuery.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 class="backStep" onClick="validarEtapaVolver('+(x)+')" href="#">'+ (txtBack || 'Volver') +'</a>'); } if ((x+1)< total) { $(el).append('<a class="backStep" onClick="validarEtapaSiguiente('+(x)+')" href="#">'+ (txtNext || '')+'</a>'); } if((x+1)== total){ $(el).append('<input type="buttom" class="enviar" value="" id="enviar" onClick="validarEtapaSiguiente('+(x)+');" />'); } $(el).attr("id", "x_" + x); }); } }); function validarEtapaSiguiente(x){ var sigue = false; if(x == 0){ var paso1=$(".seccion1").validationEngine('validate'); if(paso1==true){ sigue = true; } } if(x == 1){ var paso2=$(".seccion2").validationEngine('validate'); if(paso2==true){ sigue = true; } } }
Código HTML:
<form id="form1" name="form1" method="post" action="validaSubmitIndex.php" class="dividirPasos"> <fieldset> <div id="formularioVertical" class="seccion1"> <label class="primero" for="limpiador"> Limpiador <input type="text" value="" id="txtB1P1" name="txtB1P1" class="validate[required] sombra" onkeypress="return justText(event);" /> </label> <label for="exfoliante"> Exfoliante <input type="text" value="" id="txtB1P2" name="txtB1P2" class="validate[required] sombra" onKeyPress="return justText(event);"/> </label> </div> </fieldset>