Validación de Formularios

Consideraciones previas

• La validación en cliente mejora la usabilidad de la aplicación pero NO debe reemplazar a la validación en servidor.
• Se pueden consultar las demos online

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.
• Ojo con las dependencias: jQuery, tested with 1.6.4, 1.7.2, 1.8.3, 1.9.0
• La descarga contiene todos los ficheros necesarios, incluidas las demo.

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.

html en formularios

• Cada input del formulario lleva un label asociado
• El atributo for del label hace referencia al id del formulario
• El atributo name es necesario para el funcionamiento del plugin del formulario
• Normalmente el atributo name y el atributo id suelen tener el mismo valor

<label for="firstname">Firstname</label>
<input id="firstname" name="fname"/>

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.
• 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.
• Todos los métodos de validación dan por buenos campos vacios salvo los métodos required y equalTo.

Añadir métodos de validación

• Siempre es posible agregar a jquery.validation nuestras propias validaciones personalizadas.
• Los métodos menos habituales se encuentran en la librería de additional_methods para que el script de validación pese menos.
• No crees varios ficheros de additional_methods para evitar excesivos request y tener una carga de página óptima.
• Se utiliza la función: jQuery.validator.addMethod()
• Consulta la API de jQuery Validation para obtener más información

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.

Mediante el uso de metadatos

• 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.

Mediante settings del plugin (opción rules)

• A través de código javascript y añadiendo las reglas a través del objeto rules.
• El código queda más limpio pero a veces es más complicado si usamos un framework web.

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

• El método validate que se asocia al formulario, permite un paso de parámetros vía json: {parametro1: valor, parametro2: valor...}
• El parámetro rules define para los elementos del formulario que aparecen listados, las reglas de validación que van a tener que cumplir.

Personalizando la validación

submitHandler

• Nos permite especificar una función que se llamará cuando la validación haya tenido éxito.
• En este función podemos incluir código de validación a nivel global.
• Será responsabilidad nuestra enviar definitivamente el formulario con form.submit().

invalidHandler

• es una función que se llamará si la validación no ha tenido éxito.
• Con ignore podemos especificar un selector jQuery para ignorar campos de nuestro formulario.

onsubmit, onfocus, onkeyup, onclick

• Nos permiten decidir cuándo se realizará la validación.

errorClass y validClass

• Podemos especificar el nombre de la clase CSS que se agregará al elemento validado en caso de fracaso o de éxito de la validación.

errorElement, errorContainer, errorLabelContainer y wrapper

• Podemos configurar la posición y que tipo de elementos se generarán para los mensajes de error.

showErrors

• Es una función que nos permite tratar con todos los mensajes de errores encontrados para visualizar de una forma concreta o realizar la operación que creamos oportuna.

errorPlacement

Es una función que nos permite decidir donde situar los mensajes de error generados. higlight y unhiglight determinan como resaltar los elementos que no han superado la validación.