El uso insuficiente de la validación de formularios HTML

 (expressionstatement.com)
2 puntos por GN⁺ 2024-10-29 | 1 comentarios | Compartir por WhatsApp

El bajo uso de la validación de formularios HTML

  • Los formularios HTML tienen un mecanismo de validación potente, pero no se usa mucho. Mucha gente no lo conoce bien. Esto podría deberse a defectos de diseño.

Atributos, métodos y propiedades

  • Se puede agregar el atributo required para evitar entradas vacías.
  • Hay tres formas de agregar restricciones a una entrada:
    • usar valores específicos del atributo type: "email", "number", "url"
    • usar otros atributos de entrada como "pattern" o "maxlength"
    • usar el método DOM setCustomValidity: la forma más potente, capaz de crear lógica de validación arbitraria y manejar casos complejos.

Las sutilezas de la API imperativa

  • La API setCustomValidity solo se ofrece como método, lo que la hace incómoda de usar.
  • Por ejemplo, puede implementarse una funcionalidad equivalente al atributo required para bloquear el envío del formulario cuando la entrada está vacía.
  • En el renderizado inicial, debe configurarse como no válida si la entrada está vacía.

El problema del boilerplate

  • La forma de validar valores iniciales es engorrosa.
  • La lógica de validación se duplica entre el manejador onChange y la etapa de renderizado inicial.
  • La combinación de useRef + useLayoutEffect + onChange es compleja.

Lo que falta

  • Hace falta un atributo custom-validity.
  • En los frameworks declarativos, permitiría definir la validación de entradas de forma potente.

El poder de la validación asíncrona

  • Puede manejar casos donde un nombre de usuario solo debe ser válido si no está en uso.
  • Requiere una llamada asíncrona al servidor y un estado intermedio.

Implementación

  • Se usa la función verifyUsername para comprobar la unicidad del nombre de usuario.
  • Se usa useQuery para gestionar el estado de la solicitud al servidor.
  • Se usa la propiedad customValidity para describir el flujo de validación asíncrona.

Formulario de confirmación de contraseña

  • Se implementa un formulario donde la contraseña ingresada debe repetirse.
  • La validación verifica que los dos campos coincidan.

Conclusión

  • setCustomValidity puede cubrir diversas necesidades de validación.
  • Una API potente es lo que aporta el verdadero poder.
  • Se espera que esta funcionalidad se agregue a la especificación de HTML.

Resumen de GN⁺

  • La validación de formularios HTML es potente, pero no se aprovecha bien. Esto podría deberse a la complejidad de la API.
  • El método setCustomValidity es una herramienta poderosa para manejar lógica de validación compleja.
  • Se presenta una forma de manejar escenarios complejos, como la validación asíncrona.
  • Este artículo ofrece información útil para ayudar a los desarrolladores a aprovechar mejor la validación de formularios HTML.

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-10-29
Comentarios de Hacker News

  • Los navegadores web todavía no permiten cambiar el estilo de los mensajes integrados de validación HTML, y Chrome y Firefox no siguen las guías de UI de la plataforma del sistema operativo, por lo que chocan con la estética del proyecto

    • Chrome antes permitía cambiar el estilo de los mensajes de validación usando selectores de pseudoelementos con prefijo de proveedor, pero esa función fue eliminada
    • Hay quejas sobre el uso ineficiente de los cuadros combinados HTML y de <select multiple>

  • Usar ciertos valores del atributo type (por ejemplo, "email", "number", "url") puede activar el teclado óptimo en móvil y mejorar mucho la experiencia de usuario

  • Quienes escriben las especificaciones están desconectados del uso real; sirve para cosas simples, pero en formularios complejos es mejor hacerlo uno mismo

  • Se lamenta no haber valorado la simplicidad básica de los formularios y se agradece que se comparta la perspectiva de otras personas

  • Cuando una casilla de verificación tiene una etiqueta, se pide agregar el atributo for a la etiqueta para que al hacer clic se pueda activar o desactivar la casilla

  • Se ofrece un ejemplo simple sin usar React

  • La validación de formularios HTML es excelente, pero tiene un gran problema: no funciona en Firefox para Android

  • Muchos frameworks y bibliotecas ofrecen funciones de validación con estilo personalizable, así que no hace falta complicarse

  • Hay que tener cuidado de no abusar de la validación

    • Se menciona una experiencia al pedir un reembolso en Groupon, donde la condición de “mínimo 15 palabras” obligaba a revisar el HTML
    • El patrón de validación no permitía ningún signo de puntuación

  • Los sitios que usan por error type=password para la entrada de 2FA confunden a los administradores de contraseñas y a los navegadores