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> </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.
El segundo código (jQuery) va dentro del mismo html???
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 …