Validación Campos con JQuery

En este artículo se detallan los elementos para realizar una validación de campos con JQuery, para ello se dispone de un formulario de contacto de ejemplo como el que se pudo ver en el anterior artículo de Plantillas de Contacto en Bootstrap. Además se indica el código fuente de la sección de JQuery explicando detalladamente cada paso.

A lo largo del artículo se pueden observar diferentes ejemplos y sus códigos desarrollados parte por parte. Adicionalmente para crear dicho contenido en la web, se crea un fichero de ejemplo con los elementos que se explican en el artículo. Además como en anteriores posts, se facilita al final del mismo un fichero de ejemplo y también se incluye un enlace para probar los ejemplos sin necesidad de descargar el contenido.

&nbps;

FORMULARIO DE CONTACTO

En la siguiente captura se puede apreciar un formulario de contacto realizado con Bootstrap HTML5, como se puede observar se han rellenado  los campos con los datos de Nombre y Apellidos, un teléfono, un email y un mensaje. Si se observa con más precisión se puede apreciar que el botón de “Enviar Mensaje” está activo.

validate_field

Qué sucede si no se validan los campos y el usuario envía el formulario?

Pueden suceder dos cosas la primera que el servidor devuelva una respuesta con error porque faltan datos en la petición. La segunda, que el servidor acepte la información pero el destinatario (el proveedor de la web) no reciba la información necesaria. Para que no sucedan estos “pequeños” inconvenientes es necesario validar (en la capa del cliente) los campos que son obligatorios y además, validar que sean rellenados con la información que se está solicitando.

 

PREPARANDO LOS CAMPOS

En este artículo se ha diseñado una pequeña y ágil validación de campos con JQuery, que a continuación se detalla. En la siguiente captura se puede apreciar unas líneas de código que se han desarrollado en el ejemplo de este post, para validar los campos de inserción de datos. En esta captura se observa el id=”alertName” correspondiente al campo de “Nombre y Apellidos”. A diferencia respecto el artículo del formulario de contacto simple, se crea un div con class=”control-group form-group”, insertando dentro de este div, otro con class=”controls”. A continuación se añaden 3 etiquetas, un label (donde se indica el “titular” del campo), un span (donde se crea la alerta de error de la validación), dentro del span se sitúa el input (donde el usuario introduce los datos) y finalmente un párrafo p con class=”help-block”.

Entrando en detalle sobre el span tiene las siguientes propiedades o atributos:

  • ID: identificador con el que se podrá realizar una llamada a esta etiqueta o contenido, en función de la llamada realizada por el desarrollador.
  • Data-toggle: elemento que se inserta dentro del span para indicar al sistema que se va a generar en formato popover (notificación emergente).
  • Data-trigger: elemento que se inserta dentro del span para indicar al sistema que el popover está oculto a no ser que el usuario se sitúe encima del campo.
  • Data-placement: indica la dirección hacia donde se va a expandir el popover en la página. Existen varias opciones: top (arriba), bottom (abajo), right (derecha), left (izquierda) y auto (el sistema decide que posición es mejor).
  • Title: elemento que se inserta dentro del span para indicar al sistema el titulo la etiqueta o tag.
  • Data-content: elemento para crear una descripción en el popover, en este elemento se inserta (cuando se realiza la validación en el código de JQuery), el mensaje de alerta que se quiere mostrar al usuario.

 

Se observa en la siguiente captura la estructura de código de los otros grupos de campos del formulario, se ha remarcado en rojo las etiquetas span para que se pueda observar que los input, están insertados dentro de los span, esto se realiza para que, cuando un campo sea incorrecto, el popover aparezca al usuario cuando sitúa su cursor encima de todo el campo. Adicionalmente se ha subrayado los elementos id de los input, ya que, posteriormente estos id serán los que se utilizan en el código de JQuery personalizado para llamar a estos campos.

 

VALIDACIÓN CON JQUERY

Para realizar la validación de campos se ha creado un fichero jquery-example.js en el directorio “js”, donde se realizan cada una de las validaciones, como el código de validación es un poco extenso, se ha realizado un análisis por partes. A continuación se pueden apreciar en la siguiente captura, el código para que se muestren los popover y la verificación del campo de Nombre y Apellidos:

Antes de empezar a detallar las partes de este primer bloque, se debe recalcar que todas las validaciones que se están realizado deben ir dentro del $(document).ready.

En la primera línea dentro del document ready, se crean variables que posteriormente se utilizaran para llamar al método / función “verificaFormulario“,  que se utiliza para activar o desactivar el botón de “Enviar Mensaje”, esta función se detalla posteriormente. A continuación se puede observar el siguiente código: $(‘[data-toggle=”popover”]’).popover(); esta línea de código realiza la función de mostrar los popover cuando el usuario pasa el cursor por encima. Posteriormente se puede observar la verificación del campo input de Nombre y Apellidos. Se analiza este bloque a continuación:

  • $(“#txtName”).blur(function(){…});“: se indica que el campo con id “txtName” se realiza la función que se especifique dentro de los corchetes, cuando el campo pierde el foco del control (normalmente sucede cuando el usuario realiza un tabulador o pulsa con el ratón en otro campo), este evento es conocido por blur. En futuros artículos se detallaran los diversos eventos que dispone JQuery.
  • var name = $(“#txtName”).val();“: se “atrapa” en una variable name el valor del campo de texto con id “txtName”.
  • if (name.length > 0){…}“: si la medida del valor que dispone la variable name es superior a cero caracteres, es decir, si el campo “Nombre y Apellidos” no está vacío, se realizan las acciones de dentro del if.
    • $(“#txtName”).removeClass(“form-control-error”);“: Se borra la clase form-control-error del input de Nombre y Apellidos.
    • $(“#alertName”).attr(“data-content”, “”);“: Se “resetea” (borra el contenido descriptivo del error) al popover disponible para la alerta del campo de Nombre y Apellidos.
    • i1 = true;“: Se indica que la variable i1 es true. Esta variable será utilizada en la función que se detalla posteriormente.
  • else{…}“: El sistema solo entrará en esta sección del código cuando “name.length < 0″, es decir cuando el campo de Nombre y Apellidos esté vacío.
    • $(“#txtName”).addClass(“form-control-error”);“: se añade la clase personalizada form-control-error al campo de Nombre y Apellidos. Esta clase pondrá en rojo los bordes del campo.
    • i1 = false;“: Se indica que la variable i1 es false. Esta variable será utilizada en la función que se detalla posteriormente.
    • $(“#alertName”).attr(“data-content”, “Debe introducir un nombre.”);“: Se indica al usuario que el campo no puede estar vacío. Para ello en el popover de alerta correspondiente al campo de Nombre y Apellidos se introduce el texto “Debe introducir un nombre”.
  • verificaFormulario(i1, i2, i3,i4);“: se llama a la función verificaFormulario que comprobará si todos los campos obligatorios, están correctamente rellenados por el usuario y en función de ese resultado, el botón de “Enviar Mensaje” se activará o no (la función se detalla con más precisión posteriormente).

 

En la siguiente captura tenemos una validación parecida a la explicada anteriormente, pero en este caso se valida el campo de teléfono. Como se ha realizado en la anterior validación, se “atrapa” el valor del teléfono a través del id (txtPhone) establecido en el código y cuando el usuario pierde el foco del campo, el sistema empieza a realizar la función. Vamos a observarla:

En la primera línea dentro de la función se crea una variable phone para guardar el valor del campo. En la segunda línea se crea otra variable para almacenar una expresión (que se utilizará posteriormente para validar el formato de un teléfono). A continuación se realizan dos comprobaciones a través de bucles if / else, una primera es para verificar si el campo está vacío y una segunda, que se realiza dentro del primer if, utilizada para verificar que el formato que ha introducido el usuario en el email es el correcto.

  • if(phone.length > 0){…}“: si el campo de teléfono no está vacío se realizarán las acciones que hay dentro de este bucle.
    • if(!expression.test(phone)){…}“: Se realiza una verificación con la función .test pasando un valor (phone). Esta función verifica si el valor que le pasamos tiene la estructura especificada en la variable creada anteriormente (expression). En el caso del ejemplo al poner el símbolo “!” se indica que se realizarán las acciones, de dentro del bucle if, cuando la expresión sea incorrecta, es decir, el teléfono no este en el formato correcto.
      • $(“#txtPhone”).addClass(“form-control-error”);“: se añade la clase que pone el borde del campo en rojo.
      • $(“#alertPhone”).attr(“data-content”, “El teléfono…”);“: se añade texto al popover para indicarle al usuario el error que ha cometido.
      • i2 = false;“: se indica que la variable i2 es false. Esta variable será utilizada en la función que se detalla posteriormente.
    • else{…}“: Si el usuario ha introducido el teléfono en el formato que se desea entrará en este bucle.
      • $(“#txtPhone”).removeClass(“form-control-error”);“: se quita la clase que pone el borde del campo en rojo, para que recupere su color por defecto.
      • $(“#alertPhone”).attr(“data-content”, “”);“: se resetea el texto del popover.
      • “i2 = true;”: se indica que la variable i2 es true. Esta variable será utilizada en la función que se detalla posteriormente.
  • else{…}“: si el campo de teléfono está vacío se realizarán las acciones que hay dentro de este bucle.
    • $(“#txtPhone”).addClass(“form-control-error”);“: se vuelve a indicar el campo en rojo con la clase personalizada.
    • $(“#alertPhone”).attr(“data-content”, “El campo de teléfono es obligatorio…);“: se añade en el popover un texto indicando al usuario que debe corregir.
    • i2 = false;“: se indica que la variable i2 es false. Esta variable será utilizada en la función que se detalla posteriormente.
  • verificaFormulario(i1, i2, i3, i4);“: se llama a la función verificaFormulario que comprobará si todos los campos obligatorios, están correctamente rellenados por el usuario y en función de ese resultado, el botón de “Enviar Mensaje” se activará o no (la función se detalla con más precisión posteriormente).

 

En el tercer bloque de código se verifica el campo de email con el mismo evento que los otros explicados anteriormente. A partir de estas capturas se detalla el funcionamiento sin entrar en detalle en todo el código (si se tiene cualquier duda al respecto dejar un comentario).

Se captura en la variable email el valor del campo con id=”txtEmail”. Se crea la variable expresion con un estandar de como debe ser un email (la creación de expresiones las podéis consultar en google, en diversas páginas webs). Si el campo email no está vacío pero es incorrecto se indica el campo en color rojo, los bordes y se indica en el popover un mensaje indicando al usuario que no tiene el formato correcto. Nuevamente se indica la variable, en este caso, i3 en false. Si el campo de email no está vacío y es correcto se indica el campo en su valor por defecto, y se resetea el popover. La variable i3 toma el valor de true. Por el contrario si el campo de email está vacío, se indica el campo en color rojo y se indica en el popover un mensaje indicando que el campo es obligatorio. Posteriormente se llama a la función verificaFormulario pasando las variables especificadas.

 

Finalmente se acaba la verificación de los campos, comprobando el campo de mensaje. Cuando el usuario pierda el foco del campo verifica si el campo está rellenado o no.

Se crea la variable message donde se almacena el valor de mensaje introducido por el usuario. Si el campo no está vacío, se borra la clase de error, se resetea el popover y establece la variable i4 a true. Por el contrario si el campo de mensaje está vacío, se añade la clase de error (modificará el campo y lo pondrá en rojo), se añade texto indicando al usuario que el campo es obligatorio y se establece la variable i4 a false. Posteriormente se llama a la función verificaFormulario.

En la siguiente captura se observa la función de verificaFormulario. Esta función es bastante simple, verifica a través de cuatro variables su propiedad si es true o false, si son ciertas (true) activa un botón. En caso contrario (false) el botón queda deshabilitado.

En los anteriores bloques de código se ha observado que se ha ido modificando unas variables (i1, i2, i3, i4), estos elementos son utilizados para este método, de modo que si el usuario ha rellenado correctamente todos los campos, cumpliendo las condiciones de verificación que se han detallado, el botón de enviar con id=”btnEnviar” de nuestro formulario, se activará y el usuario podrá enviar el formulario. En caso contrario (else) significa que el usuario le falta por corregir alguno de los campos, por lo que se desactiva el botón y no se permite al usuario enviar el formulario.

 

En las siguientes capturas se pueden apreciar el resultado que observarian los usuarios al no introducir elementos en los campos obligatorios:

En esta segunda captura se puede apreciar el texto especificado en los popover correspondientes, cuando el usuario no introduce ningún dato en los campos. Recordar que los popover solo serán visibles cuando el usuario ponga el cursor encima del campo correspondiente.

CREANDO UNA CLASE PERSONALIZADA DE CSS

En el fichero de css personalizado, que se ha podido observar en los anteriores artículos, se añade la clase form-control-error, esta clase realizará el cambio de color de los campos con error.

EJEMPLO EN LÍNEA

Se crea el siguiente enlace para que se pueda probar en la web los ejemplos comentados en el artículo. Para ello simplemente pulsar sobre el siguiente botón y la página se redirige a la web del ejemplo, sin necesidad de tener que descargarlo. 

VER EL EJEMPLO EN LÍNEA

Además también se adjunta el fichero comprimido con los ejemplos utilizados en el post, para los que prefieren practicar de manera local en sus pc’s: plantillas de contacto con validación de campos. En próximos artículos se añadirán otras validaciones o acciones con elementos de un formulario, también se podrá observar los eventos disponibles en JQuery, entre otras publicaciones.

 

Se recuerdan los artículos relacionados sobre JQuery:

 
Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *