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> </li>
<li>
<input name="boletin" id="boletin" type="radio" value="Si" /> Si
<input name="boletin" id="boletin" type="radio" value="No" /> No
</li>
<li> </li>
<li>¿Cada cuanto nos visitas? <span>(*)</span></li>
<li> </li>
<li><input name="visitas" id="visitas" type="checkbox" value="diariamente" /> Diariamente</li>
<li> </li>
<li><input name="visitas" id="visitas" type="checkbox" value="semanalmente" /> Semanalmente</li>
<li> </li>
<li><input name="visitas" id="visitas" type="checkbox" value="mensualmente" /> Mensualmente</li>
<li> </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.
Comentarios