Nuestros Cursos de Programación Web en Vídeo!

Aprende a hacer paginas web desde casa con nuestros cursos online de diseño y desarrollo web. La mitad de los cursos es totalmente gratuita, anímate a empezar el curso que elijas gratis y después decide si quieres suscribirte.

Ver el curso mas reciente

cursos.datoweb.com

Validar todos los campos de un formulario automáticamente

Con el siguiente ejemplo podremos validar todos los campos de un formulario automáticamente sin importar cuantos campos tenga, de esta manera no tendremos que validar uno por uno.

Esto es muy útil para validar formularios complejos con muchos campos y lo conseguimos serializando el form completo.

Vamos con el ejemplo...

HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<form onsubmit="return validar();" id="formValidar" method="post">

<input type="text" name="campo1" placeholder="Campo 1...">
<br><br>
<input type="text" name="campo2" placeholder="Campo 2...">
<br><br>
<textarea name="campo3" placeholder="Campo 3..."></textarea>
<br><br>
<div id="res"></div>
<input type="submit" value="Enviar">

</form>
JS
<script>

function validar(){
	
	//Serializamos todos los campos del form dinámicamente
	var campos= $('#formValidar').serializeArray();
	//Por defecto la validación es 1
	var validar=1;
	
	//Recorremos todos los campos del formulario
	$.each(campos, function(index, value) {
		//Si uno de los valores esta vacio pasamos la validación a 0
		if(value.value=='') validar=0;
	});

	//Si la validación es 0 no enviamos el form y mostramos un mensaje
	if(validar==0){
		$('#res').text('Completa todos los campos');
	     return false;	
	} else {
	//Si la validación es 1  enviamos el form
		$('#res').text('Enviando...');
		return true;
		
	}



}

</script>
Demo

Salu2
0
Puntos
0
Resp
153
Visitas
Por alber hace 1 mes
Moderador offline