Ir al contenido principal

¿ 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í

Comentarios

Entradas populares de este blog

Validar campo de texto sólo letras, números con javascript

En algunos casos necesitaremos que el usuario ingrese solamente letras en un campo de texto, impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript y HTML esto puede ser posible.   Método 1:  Podemos utilizar el atributo onkeypress devolviendo el valor de false, si es que se escribe un caracter distinto a la cadena que hemos definido (para el ejemplo es " áéíóúabcdefghijklmnñopqrstuvwxyz").   Método 2: Pasos a seguir: Crear una lista con todas las letras permitidas (a,b,c ... etc). Crear una lista de teclas especiales tales como (BackSpace , flecha izquierda, flecha derecha, Supr) estas son teclas permitidas aparte de las teclas permitidas en el primer paso.     Entendiendo el código En la línea 4 la sentencia String.fromCharCode(key) obteniene el caracter presionado por el usuario que añadiendo la sentencia toLowerCase() convertiríamos la letra a minúscula. Con esto guardamos la letra presionada por el usuario en la variabl

La propiedad Disabled en Javascript

Como atributo de un elemento HTML Ejemplo: "Solo añadiendo el atributo disabled". < input type = "button" value = "Desactivado" disabled /> < input type = "text" disabled /> < input type = "button" value = "Boton normal" /> Demostración: El botón y el campo de texto están desactivados Manipulando Disabled usando Javascript Ejemplo 1: Utilizando el "id" del campo de texto en este caso "miText". < script type = "text/javascript" > function Desactivar () { document . getElementById ( 'miText' ) . disabled = true ; } < /script > < input type = "button" value = "Desactivar" onclick = "Desactivar()" / > < input type = "text" id = "miText" / > Demostración: Dándole clic al botón se desactiva el campo de texto. Ejemplo 2:Utilizando el event

Validar campo de texto con javascript

Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript. Código < script type = "text/javascript" > function validar () { //obteniendo el valor que se puso en campo text del formulario miCampoTexto = document . getElementById ( "miCampo" ) . value ; //la condición if ( miCampoTexto . length == 0 ) { return false ; } return true ; } </ script > < form action = "mipagina.php" onsubmit = "return validar()" > < input type = "text" id = " miCampo " name = "miCampo" > < br > < input type = "submit" value = "Enviar" > </ form > miCampoTexto.length -> indica el número de caracteres del texto introducido En esta validación los usuarios deben llenar los campos