¿ Como usar Jquery Validate ?

Vamos de una vez al grano.
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

<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 :

  1.  No olvidar agregar el atributo name a todos campos y combos del formulario.
  2. Los combos deben tener una opción con el atributo value = ""

Reglas para validar email, url, maximo, minimo etc

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.

<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:


Email
Nombre
Edad
Pais

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:



Email
Nombre
¿Quieres ahora usar Jquery Validate con Ajax?, entonces sigue la continuación de este artículo aquí

No hay comentarios:

Publicar un comentario