Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Validation Engine con stepForm

Estas en el tema de Validation Engine con stepForm en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/05/2012, 11:29
Avatar de zerokull  
Fecha de Ingreso: noviembre-2009
Mensajes: 153
Antigüedad: 15 años
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

Etiquetas: jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:36.