Validación

Tipos de validación

• Validación integrada de formularios

  Una de las características más resaltantes de los elementos de formulario modernos es su capacidad para validar la mayoría de los datos sin recurrir a JavaScript, esto a través del uso de funciones las cuales están disponibles de forma inherente a la mayoría de los elementos.

  Si los datos ingresados en el elemento cumplen con todas las pautas definidas para este, se considera válido. En aquellos elementos definidos como válidos:

  1. El elemento es compatible con la pseudoclase de CSS :valid, la cual permite aplicar estilos específicamente a todos aquellos elementos válidos.
  2. Si el usuario intenta enviar los datos del formulario, el navegador lo hará, siempre y cuando no exista otra limitante que lo impida.

  Cuando un elemento no es válido:

  1. El elemento coincide con la pseudoclase CSS :invalid, la cual le permite aplicar estilos CSS a todos aquellos elementos que no sean válidos.
  2. Si el usuario intenta enviar la información, el navegador rechazará su acción y mostrará un mensaje de error hasta que se cumplan todos los parámetros.

  Nota: A continuación se nombran los términos utilizados para los casos de error que pudiesen cometer los usuarios, resultando en elementos interpretados como inválidos:

  • badInput
  • patternMismatch
  • rangeOverflow o rangeUnderflow
  • stepMismatch
  • tooLong o tooShort
  • typeMismatch
  • valueMissing

  Un ejemplo de la implementación de los estilos CSS según el estatus del elemento es:

  

  Este código retorna un cuadro de texto al que se le asignan estilos en base a su estatus; es decir, al usar el atributo "required", la entrada será compatible con las pseudoclases ":required", ":invalid" y ":valid". Por otro lado, el elemento será considerado inválido en aquellos casos en los que se intente enviar el campo vacío.

  Nota: Indicar cuándo un campo de un formulario es obligatorio no solo es una buena práctica, sino que es un requisito de las normas de accesibilidad de la WCAG.

  Nota: También es una buena práctica preguntar solo lo necesario; los formularios excesivamente largos o con información irrelevante pueden ser contraproducentes.

  Los atributos de validación son:

  • Required: Define si alguno de los campos es de carácter obligatorio para poder realizar el envío de los datos. Mostrará un mensaje de error mientras la entrada se encuentre vacía.
    
    
    
    

  • Minlength y Maxlength: Definen la longitud máxima y mínima de los datos textuales. El elemento será inválido si el texto es inferior al mínimo o superior al máximo definido.

    Nota: Los navegadores normalmente no permiten escribir un valor más largo de lo esperado.

    Nota: Una buena herramienta para la experiencia del usuario es utilizar "maxlength" junto con JavaScript para mostrar un contador de caracteres.

  
  

  • Min y Max: Especifican los valores mínimo y máximo de los elementos de entrada numéricos. Definen el rango aceptado; si el número está fuera de este, se considerará inválido.

    Ejemplo:

    

    Este código define la cantidad de caracteres y el rango numérico aceptado. Si no se cumple con el rango de caracteres o el número no está entre 1 y 10, el elemento es tratado como inválido. A continuación el resultado funcional:

    ¿Prefieres banana o cereza? (6 letras):

    ¿Cuántas quieres? (1-10):

    Enviar

    Nota: Elementos tipo "number", "range" y "date" también pueden adoptar el atributo "step", el cual define la cantidad de incremento o reducción del valor.

  
  
  • Type: Especifica el tipo de dato que será manejado, como correo, número, etc.
  
  

  • Pattern: Este atributo define una expresión regular. Permite definir que únicamente sean aceptadas ciertas cadenas de caracteres definidas con anterioridad.

    Ejemplo funcional:

    

    El resultado es el siguiente:

    ¿Prefieres banana o cereza?: Enviar

    Las expresiones regulares diferencian entre mayúsculas y minúsculas. En este ejemplo, el input acepta: Banana, banana, Cherry y cherry. Si el usuario ingresa algo diferente, será reconocido como inválido.

• Validación con JavaScript

  Se trata de cualquier framework o código propio utilizado para validar un formulario. Tiene la ventaja de ser completamente personalizable, cubriendo cualquier necesidad de información y brindando mayor seguridad si está bien estructurado.

  Sin embargo, su implementación es más compleja que las validaciones integradas de HTML, ya que requiere formular código propio o incluir bibliotecas.

  Debido a que involucra un lenguaje externo, es necesario tener presentes cualidades como el DOM y las APIs, que tienen la capacidad de repercutir en los elementos HTML.

  API de validación de restricciones

  Consta de un conjunto de métodos y propiedades disponibles en las interfaces DOM de los elementos de formularios:

  • HTMLButtonElement
  • HTMLFieldSetElement
  • HTMLInputElement
  • HTMLOutputElement
  • HTMLSelectElement
  • HTMLTextAreaElement

  Propiedades disponibles:

  • ValidationMessage: Devuelve un mensaje de error descriptivo. Puede retornar un mensaje personalizado, "false" si no es candidato para validación, o una cadena vacía si es válido.

  • Validity: Retorna un objeto ValidityState con propiedades como patternMismatch, tooLong, tooShort, rangeOverflow, typeMismatch, valid y valueMissing.

  Métodos disponibles:

  1. checkValidity(): Retorna "true" si no hay problemas de validación; de lo contrario, "false" y activa el evento de elemento inválido.
  2. reportValidity(): Reporta errores mediante eventos; útil con preventDefault() en onSubmit.
  3. setCustomValidity(mensaje): Establece un mensaje de error personalizado.

  Implementación de un mensaje de error personalizado

  Es posible usar JavaScript para configurar mensajes que se mostrarán al incumplir las pautas. No obstante, tiene desventajas: no es fácil modificar su aspecto con CSS y depende de la configuración regional del navegador.

  Ejemplo de uso:

  HTML:

  

  JavaScript:

  

  Aquí verificamos la propiedad validity.typeMismatch. Si el correo no tiene el formato correcto, llamamos a setCustomValidity() con nuestro mensaje. Si es correcto, pasamos una cadena vacía para validar la entrada.

  El atributo "novalidate" indica al navegador que no realice la validación por defecto, permitiéndonos mostrar nuestros mensajes personalizados sin interferencias.

  Validación de formularios sin una API integrada

  Para estructurar validaciones de esta forma hay que tener en cuenta:

  1. La pseudoclase :invalid debe definirse como una clase manual.
  2. Hay que estructurar el JavaScript desde cero (cuándo no enviar, qué mensaje mostrar, etc.).

  Como se aprecia, realizar una validación propia no es difícil si el código está bien planteado. Además, es una buena práctica procurar que el código sea reutilizable para agilizar futuros desarrollos.