Validación de Formularios

Instalación

• Localizar el plugin más adecuado para la validación de formularios desde la lista de plugins de la web de jQuery
• Elegimos jQuery Validation por ser el más antiguo y popular de todos.
• La descarga contiene todos los ficheros necesarios, incluidas las demo.
• Se pueden consultar las demos online

Pasos previos

• Para utilizar jquery.validation, agregar referencia a las librerías jQuery y jquery.validation:

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>

• Directorio dist:

Se encuentran los scripts propios de validación.

Hay versión de desarrollo y versión de producción

El fichero additional_methods.js tiene librerías adicionales de validación, las menos habituales.

• Directorio lib:

Librerías útiles, como distintas versiones de jQuery (necesarias para el correcto funcionamiento del plugin).

jquery.forms.js:

jquery.mockjax.js:

• Directorio localization:

Ficheros de traducción de los mensajes del plugin.

Habrá que utilizar el de español en nuestros desarrollos.

• Directorio demo:

Útil echarle un ojo, nos puede servir de ayuda para implementar nuestras soluciones.

Métodos de validación

• Los métodos de validación implementan el código necesario para validar los elementos.
• De serie tenemos disponibles un número considerable de métodos de validación para las comprobaciones más habituales
• Los métodos menos habituales se encuentran en la librería de additional_methods
• Siempre es posible agregar a jquery.validation nuestras propias validaciones personalizadas. Lo suyo sería hacerlo directamente en el additional_methods para evitar excesivos request.
• Por ejemplo, un método de validación sería el código necesario para validar que las entradas de algunos campos sean numérica.

Reglas de validación

• Permiten asociar un elemento de nuestro formulario a uno o más métodos de validación.
• Existen varias formas para implementar las reglas de validación que no son excluyentes entre sí. Podemos mezclaras si nos conviene.
• A través de nombres de clases css en atributo class.
  class=”required number” especifica que nuestro elemento será requerido y sólo aceptará números.
  Estos nombres de clases no tienen por qué existir en tu hoja de estilos, son clases que utilizará sólo jquery.validation.

<form method="post" id="myForm">
    <p>
        Nombre
        <input type="text" id="nombre" name="nombre" class="required" />
    </p>
    <p>
        Edad
        <input type="text" id="edad" name="edad" class="required digits" />
    </p>
    <p>
        <input type="submit" value="Enviar" />
    </p>
</form>

• Con atributos personalizados que requieren parámetros. Por ejemplo <input type=”text” minlength=”3”>, especifica que el contenido de nuestra caja de texto no debería ser menor a 3 caracteres.
  No es recomendable por la validación de nuestras páginas.
• A través de código javascript y añadiendo las reglas a través del objeto rules.

      $("#myForm").validate({
                debug: true,
                rules: {
                    nombre: {
                        required: true,
                        minlength: 2
                    },
                    edad: {
                        required: true,
                        digits: true,
                        min: 18,
                        max: 99
                    }
                }
            });

Reglas y métodos de validación personalizados