Formulario con validación de campos en jQuery

25 oct


Hoy vamos a validar todos los campos de un formulario con jQuery, para evitar que nos envíen los formularios de nuestro sitio web vacíos.

En primer lugar, vamos a comprobar que los campos nombre, apellidos, localidad, no se dejan en blanco y tienen una longitud mínima.

Después podemos continuar validando el teléfono, comprobando que todos los caracteres son numéricos.

También validaremos los campos de e-mail, para comprobar que se trata de una dirección e-mail correcta, con formato ejemplo@ejemplo.com

Para terminar validaremos los campos select, comprobando que se ha seleccionado una opción, y los input checkbox e input radio comprobando que han sido marcados.

Aquí el ejemplo del formulario:

<form name="formulario" id="formulario" class="formulario" action="" method="post">
<ul>
<li>Nombre <span>(*)</span></li>
<li>Apellidos <span>(*)</span></li>
<li><input name="nombre" id="nombre" type="text" /></li>
<li><input name="apellidos" id="apellidos" type="text" /></li>
<li>Teléfono <span>(*)</span></li>
<li>E-Mail <span>(*)</span></li>
<li><input name="telefono" id="telefono" type="text" /></li>
<li><input name="email" id="email" type="text" /></li>
<li>Localidad <span>(*)</span></li>
<li>Provincia <span>(*)</span></li>
<li><input name="localidad" id="localidad" type="text" /></li>
<li>
<select name="provincia" id="provincia" class="mail_provincia">
...............................
</select>
</li>
<li>¿Desea apuntarse al boletín de noticias? <span>(*)</span></li>
<li>&nbsp;</li>
<li>
<input name="boletin" id="boletin" type="radio" value="Si" /> Si
<input name="boletin" id="boletin" type="radio" value="No" /> No
</li>
<li>&nbsp;</li>
<li>¿Cada cuanto nos visitas? <span>(*)</span></li>
<li>&nbsp;</li>
<li><input name="visitas" id="visitas" type="checkbox" value="diariamente" /> Diariamente</li>
<li>&nbsp;</li>
<li><input name="visitas" id="visitas" type="checkbox" value="semanalmente" /> Semanalmente</li>
<li>&nbsp;</li>
<li><input name="visitas" id="visitas" type="checkbox" value="mensualmente" /> Mensualmente</li>
<li>&nbsp;</li>
<li class="botones"><input name="submit" id="submit" type="submit" value="Validar" /></li>
<li class="botones"><input name="reset" id="reset" type="reset" value="Restablecer" /></li>
</ul>
</form>

Y el código jQuery para validar los campos:

$(document).ready(function(){
	$("#formulario").submit(function () {
		if($("#nombre").val().length < 4) {
			alert("El nombre debe tener más de 3 caracteres");
			return false;
		}
		if($("#apellidos").val().length < 4) {
			alert("Los apellidos deben tener más de 3 caracteres");
			return false;
		}
		if($("#telefono").val().length < 4 || isNaN($("#telefono").val())) {
			alert("El teléfono debe tener más de 3 caracteres y solo números");
			return false;
		}
		if($("#email").val().length < 1) {
			alert("La dirección e-mail es obligatoria");
			return false;
		}
		if($("#email").val().indexOf('@', 0) == -1 || $("#email").val().indexOf('.', 0) == -1) {
			alert("La dirección parece incorrecta");
			return false;
		}
		if($("#localidad").val().length < 1) {
			alert("La localidad es obligatoria");
			return false;
		}
		if($("#provincia option:selected").val() == "") {
			alert("La provincia es obligatoria");
			return false;
		}
		if($("#localidad").val().length < 1) {
			alert("La localidad es obligatoria");
			return false;
		}
		if($("#boletin").is(':checked')) { } else {
			alert("Indique si desea apuntarse al boletín de noticias");
			return false;
		}
		if($("#visitas").is(':checked')) { } else {
			alert("Indique cada cuanto nos visitas");
			return false;
		}
		return false;
	});
});

Más adelante os explicaré uno a uno, como validar cada tipo de campo y algo más de información sobre ello.

Aquí os dejo el ejemplo, que es muy sencillo de entender.

2 Respuestas a “Formulario con validación de campos en jQuery”

  1. DA5H 1 noviembre, 2011 at 15:54 #

    El segundo código (jQuery) va dentro del mismo html???

    • error404 9 febrero, 2012 at 0:44 #

      Noo exactamente, lo puedes poner dentro del html pero con un scrip algo asi:

      jquery

      o ponerlo dentro del js y mandarlo a llamar en el html …

Agregar un nuevo comentario