Vamos de una vez al grano.
Jquery Validate por defecto valida que los campos no estén vacíos (required), ¿pero si queremos validar un email o un máximo número de caracteres para un nombre?, pues para eso podemos usar el método rules de Jquery Validate, ¿y como? bueno simplemente agregando los métodos necesarios para ese campo o campos (que pueden ser required, email, max, min, range , etc...). Veamos un ejemplo.
¿Quieres ahora usar Jquery Validate con Ajax?, entonces sigue la continuación de este artículo aquí
Tenemos un formulario con un campo de texto y un combo.
Descargar Jquery : http://code.jquery.com/jquery-1.10.2.min.js
Descargar Jquery Validate : http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js
Descargar Jquery : http://code.jquery.com/jquery-1.10.2.min.js
Descargar Jquery Validate : http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js
<script src="jquery.js"></script> <script src="jquery.validate.js"></script> <script> $function $'#miForm1' validate ; </script> <form action="post" id="miForm1"> <input type="text" class="required" name="mi_nombre"> <select class="required" name="mi_pais"> <option value="">Elegir</option> <option value="1">Peru</option> </select> <input type="submit" value="Enviar"> </form>
Demostración:
Importante :
- No olvidar agregar el atributo name a todos campos y combos del formulario.
- Los combos deben tener una opción con el atributo value = ""
Reglas para validar email, url, maximo, minimo etc
<script src="jquery.js"></script> <script src="jquery.validate.js"></script> <script type="text/javascript"> $function $'#miForm3' validate rules : mi_email : required : true//para validar campo vacio email : true //para validar formato email mi_nombre : required : true minlength : 3//para validar campo con minimo 3 caracteres maxlength : 9 //para validar campo con maximo 9 caracteres mi_edad : required : true, number : true //para validar campo solo numeros mi_pais : required :true ; ; </script> <form action="post" id="miForm3"> Email <input type="text" class="required" name="mi_email"> <br> Nombre <input type="text" class="required" name="mi_nombre"> <br> Edad <input type="text" class="required" name="mi_edad"> <br> Pais <select class="required" name="mi_pais"> <option value="">Elegir</option> <option value="1">Peru</option> </select> <br> <input type="submit" value="Enviar"> </form>
Demostración:
Mensajes de error personalizados
Podriamos cambiar este mensaje "This field is required." por uno nuestro como por ejemplo "Debe llenar este campo". Se usa junto con el metodo rules poniendo el texto que queramos por cada regla(rules) puesta anteriormente. Veamos un ejemplo<script src="jquery.js"></script> <script src="jquery.validate.js"></script> <script type="text/javascript"> $function $'#miForm4' validate rules : mi_email : required : true email : true mi_nombre : required : true minlength : 3 maxlength : 9 messages : mi_email : required : "Debe ingresar el email" email : "Debe ingresar un email valido" mi_nombre : required : "Debe ingresar un nombre" minlength : "EL nombre debe tener un minimo de 3 caracteres" maxlength : "EL nombre debe tener un maximo de 9 caracteres" ; ; </script> <form action="post" id="miForm4"> Email <input type="text" class="required" name="mi_email"> <br> Nombre <input type="text" class="required" name="mi_nombre"> <br> <input type="submit" value="Enviar"> </form>
Demostración:
¿Quieres ahora usar Jquery Validate con Ajax?, entonces sigue la continuación de este artículo aquí
Comentarios
Publicar un comentario