Curso de jQuery-Introducción

De WikiEducator
Saltar a: navegación, buscar


Validación de Formularios

Consideraciones previas

  • Se debe hacer validación tanto en cliente como en servidor.
  • Validación en el servidor: para evitar prácticas maliciosas como sql injection
  • Validación en cliente: por usabilidad. Tiempos de respuesta muy rápidos y liberación de trabajo al servidor.

Elección del plugin

Requerimientos Instalación

  • Ojo con las dependencias: jQuery, tested with 1.6.4, 1.7.2, 1.8.3, 1.9.0
  • En principio trabajaremos con la última versión de jQuery aunque no esté testeada.
  • Se pueden consultar las demos online, aunque la descarga del plugin también las incluye.

Estructura del plugin

  • 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: Script para habilitar ajax de forma transparente en los formularios.
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.

Cargar el plugin

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

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.

Métodos de validación estándar

  • required – Campo requerido
  • remote – Se solicita un recurso para chequear valided (ej. usuario que no esté ya en uso)
  • minlength y maxlength, rangelength – Longitud del campo.
  • min, max, range – Valor mínimo, máximo y rango
  • email – correo electrónico válido
  • url – url válida
  • date – fecha
  • dateISO – fecha ISO
  • number – Número decimal
  • digits – Solo digitos
  • creditcard – Tarjeta de crédito
  • equalTo – Valor igual a

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.
  • Uso de comillas para parámetros no válidos como variables de JavaScript 
$("#myform").validate({
   rules: {
     // no quoting necessary
     name: "required",
     // quoting necessary!
     "user[email]": "email",
     // dots need quoting, too!
     "user.address.street": "required"
   }
 });

Refactorizar reglas

  • Si tenemos varios campos con las mismas reglas y mensajes, podemos refactorizar reglas para reducir el código
  • Ejemplo: Tenemos varios campos que necesitan tanto required como un minlength de 2 
<input name="customer1" class="required" minlegth="2"/>
 <input name="customer2" class="required" minlength="2"/>
 <input name="customer3" class="required" minlegth="2"/>
  • Deberíamos definir el los settings del plugin el objeto messages (de forma parecida a como se hace con el objeto rules): 
 messages: {
                customer1: {
                    required: "Es necesario que escribas el nombre del cliente",
                    minlenght: "Este campo tiene que tener al menos {0} caracteres"
                },
                customer2:
                  .....
            }
  • Creemos una regla de validación nueva "a nuestra medida" utilizando addMethod y addClassRules. 
// añadimos métodos nuevos en base a los existentes pero con otro mensaje:
 $.validator.addMethod("cRequired", $.validator.methods.required,
   "Es necesario que escribas el nombre del cliente");
 $.validator.addMethod("cMinlength", $.validator.methods.minlength,
    $.format("Este campo tiene que tener al menos {0} caracteres"));
// {0} se reemplazará por el número de caracteres definidos en el parámetro de cMinlength
 //Creamos una regla de validación como combinación de ambos métodos:
 $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });
  • Nuestro html quedaría así: 
<input name="customer1" class="customer"/>
 <input name="customer2" class="customer"/>
 <input name="customer3" class="customer"/>
$("#myform").validate({
   rules: {
     // no quoting necessary
     name: "required",
     // quoting necessary!
     "user[email]": "email",
     // dots need quoting, too!
     "user.address.street": "required"
   }
 });


Mensajes de error

  • Aparecen al validar un formulario, si los campos no son válidos
  • El mensaje de error viene se puede personalizar mediante los settings del plugin
  • Si no existe, se obtiene del title del elemento
  • Si tampoco existe, utilizaremos los mensajes por defecto

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.

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.


Datagrid

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/jQuery/Plugins&oldid=14111»