Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/05/2012, 11:29
Avatar de zerokull
zerokull
 
Fecha de Ingreso: noviembre-2009
Mensajes: 153
Antigüedad: 15 años, 3 meses
Puntos: 1
Información Validation Engine con stepForm

Hola chicos que tal pues miren les traigo un codigo que te pone Formularios HTML dividirlo por pasos y las validaciones con Validation Engine.

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:
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 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;
		} 
	     			
	  }
}
y en su HTML solo ponen el un div con la siguiente clase seccion1, la clase cambia dependiendo de como hayan separado ustedes ejemplo

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> 
y asi con cada seccion si tiene duda pregunte, ESPERO LES SIRVA