Curso JavaScript desde 0: APIS WEB (API de Validación) - 89

Summary

En este capítulo se discute el uso del 'lápiz de validación' en JavaScript para validar formularios HTML. Se explica cómo el método 'checkValidity' determina si un elemento de entrada es válido, y 'setCustomValidity' permite establecer un mensaje personalizado para la validación. Se mencionan propiedades como 'validity', 'validationMessage', 'willValidate' y las propiedades de validez como 'customError', 'patternMismatch', 'rangeOverflow', 'rangeUnderflow', 'stepMismatch', 'tooLong', 'typeMismatch', 'valueMissing' y 'valid'. Se ilustra con un ejemplo práctico, donde se crea un campo de entrada numérica con restricciones y se muestra cómo se maneja la validación y los mensajes en el lado del cliente, adaptándose al idioma del navegador del usuario.

Takeaways

• 📝 En este capítulo se discute sobre el 'lápiz de validación' en JavaScript, una herramienta para validar formularios HTML.
• 🔍 El método 'checkValidity' en JavaScript permite saber si un elemento de entrada es válido o no.
• 📈 El método 'setCustomValidity' permite establecer una propiedad 'valida' para un elemento de entrada o input.
• 📑 Las propiedades de validación de un elemento de entrada son importantes para comprobar la validez de los datos ingresados.
• 🔑 La propiedad 'validity' contiene booleanas relacionadas con la validez de un elemento de entrada.
• ❗ La propiedad 'validationMessage' muestra el mensaje que el navegador mostrará cuando la validez sea falsa.
• 🔧 La propiedad 'willValidate' indica si un elemento de entrada será validado.
• 📈 Las propiedades de validez de un input, como 'customError', 'patternMismatch', 'rangeOverflow', 'rangeUnderflow', 'stepMismatch', 'tooLong', 'typeMismatch', 'valueMissing', y 'valid', son cruciales para la validación de datos.
• 📝 Se muestra cómo utilizar el atributo 'type' para limitar el tipo de datos ingresados en un campo, como solo números.
• 🛠 Se explica cómo establecer restricciones numéricas mínimas y máximas en un campo de entrada y cómo hacer que sea obligatorio.
• 📚 Se da un ejemplo práctico de cómo implementar la validación de JavaScript en un formulario HTML, incluyendo el uso de un botón y una función para manejar la validación.

Q & A

¿Qué es el 'lápiz de validación' en JavaScript?

El 'lápiz de validación' en JavaScript es un conjunto de métodos que permiten validar restricciones en formularios HTML, asegurando que los datos ingresados sean válidos según ciertas reglas.

¿Qué método de JavaScript devuelve si un elemento de entrada es válido o no?

El método 'checkValidity' se utiliza para determinar si un elemento de entrada es válido o no.

¿Qué propiedad establece si un campo de entrada contiene datos no válidos?

La propiedad 'customError' se establece cuando se define un mensaje de error personalizado para un campo de entrada que contiene datos no válidos.

¿Cuál es la función del método 'setCustomValidity' en JavaScript?

El método 'setCustomValidity' se utiliza para establecer una propiedad 'customError' personalizada en un elemento de entrada, lo que permite mostrar un mensaje de error específico cuando el campo no cumple con las restricciones de validación.

¿Qué propiedad indica si un elemento de entrada será validado o no?

La propiedad 'willValidate' indica si un elemento de entrada será validado o no según las reglas establecidas.

¿Qué propiedad refleja si el valor de un elemento coincide con su atributo de patrón?

La propiedad 'patternMismatch' se establece en true si el valor de un elemento no coincide con su atributo de patrón.

¿Qué propiedad indica si el valor de un elemento es mayor que su atributo 'max'?

La propiedad 'rangeOverflow' se establece en true si el valor de un elemento es mayor que su atributo 'max'.

¿Qué propiedad establece si el valor de un elemento es menor que su atributo 'min'?

La propiedad 'rangeUnderflow' se establece en true si el valor de un elemento es menor que su atributo 'min'.

¿Qué propiedad indica si el valor de un elemento es válido según su atributo de tipo?

La propiedad 'typeMismatch' se establece en true si el valor de un elemento no es válido según su atributo de tipo.

¿Qué propiedad se establece en true si un elemento con el atributo 'required' no tiene valor?

La propiedad 'valueMissing' se establece en true si un elemento con el atributo 'required' no tiene valor ingresado.

¿Cómo se puede mostrar un mensaje de error personalizado en el lado del cliente utilizando JavaScript?

Puedes utilizar el método 'setCustomValidity' para establecer un mensaje de error personalizado y luego llamar a 'checkValidity' para mostrar el mensaje en caso de que el campo no cumpla con las restricciones.

¿Cómo se puede asegurar que un campo de número solo acepte números dentro de un rango específico?

Se pueden utilizar los atributos 'min' y 'max' junto con el método 'checkValidity' para validar que el valor ingresado en un campo de tipo número esté dentro del rango especificado.

¿Cómo se puede mostrar un mensaje de validación en el navegador según el idioma del usuario?

El navegador automáticamente utiliza el idioma configurado por el usuario para mostrar los mensajes de validación, por lo que si el usuario está en un país donde se habla español, por ejemplo, el mensaje de validación se mostrará en español.