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

Nube Colectiva Devs

27 Feb 202309:42

Summary

TLDREn 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.

Outlines

00:00

📝 Introducción a la validación de formularios con JavaScript

En este primer párrafo se presenta el concepto de 'lápiz de validación' en JavaScript, una herramienta que permite validar restricciones en formularios HTML. Se menciona el método 'checkValidity', que evalúa si un elemento de entrada es válido. También se introduce la propiedad 'customValidity', la cual permite establecer un mensaje personalizado para un campo de entrada si contiene datos no válidos. Se destacan varias propiedades relacionadas con la validez de los datos, como 'valueMissing', 'typeMismatch', 'patternMismatch', 'rangeOverflow', 'rangeUnderflow', 'stepMismatch' y 'valid'. Además, se describe cómo se muestra un mensaje en caso de que los datos no sean válidos, dependiendo del atributo del input. Se invita a ver ejemplos en el código para comprender mejor cómo funciona la validación en JavaScript.

05:01

🛠 Implementación de validación en un ejemplo práctico

Este segundo párrafo se enfoca en la aplicación práctica de la validación de formularios. Se describe cómo crear un input de tipo número con restricciones mínimas y máximas, y cómo hacer que sea obligatorio mediante el atributo 'required'. Se detalla el proceso de crear una función que se ejecutará al presionar un botón, la cual utiliza el método 'checkValidity' para validar el contenido del input. Si el input no es válido, se muestra un mensaje personalizado utilizando la propiedad 'customValidity'. Se menciona cómo el navegador puede mostrar mensajes de validación en diferentes idiomas según la configuración del mismo. El párrafo concluye con una invitación a explorar otras propiedades y métodos de validación que pueden ser útiles en proyectos futuros.

Mindmap

Keywords

💡Lápiz de validación

El 'lápiz de validación' es una herramienta en JavaScript que permite verificar si los datos ingresados en un formulario cumplen con ciertas restricciones o patrones. Es central en el tema del video, ya que se utiliza para validar la entrada de datos en formularios HTML. En el script, se menciona que permite validar formularios HTML y se utiliza el método 'checkValidity' para verificar la validez de un elemento de entrada.

💡Método checkValidity

El método 'checkValidity' es utilizado para comprobar si un elemento de entrada es válido o no según las restricciones establecidas. Es un concepto clave en el video, ya que es la función principal que se ejemplifica. Se utiliza para devolver un valor booleano que indica si el elemento es válido o no.

💡Método setCustomValidity

El método 'setCustomValidity' permite establecer una propiedad 'valida' de un elemento de entrada o 'input', personalizando el mensaje de validación. Es mencionado en el script como una forma de indicar si un campo de entrada contiene datos no válidos, permitiendo al desarrollador definir un mensaje específico para el usuario.

💡Propiedad validity

La propiedad 'validity' es un objeto que contiene booleanas relacionadas con la validez de un elemento de entrada. Es fundamental para entender cómo se evalúa la validez en el video, ya que incluye diversas subpropiedades que indican si un elemento cumple con las restricciones de validación.

💡Propiedad valid

La propiedad 'valid' es un valor booleano que indica si un elemento de entrada es válido o no. Es utilizada en el script para mostrar mensajes de validación y es un aspecto clave en la implementación de restricciones de entrada en formularios.

💡Propiedad customError

La propiedad 'customError' se establece en 'true' si se ha definido un mensaje de error personalizado para un elemento de entrada. Es mencionada en el script como una forma de personalizar los mensajes de error, lo que permite a los desarrolladores proporcionar retroalimentación específica a los usuarios.

💡Atributos de patrón

Los atributos de patrón se refieren a restricciones que definen un formato específico para los datos de entrada. En el script, se menciona que si el valor de un elemento no coincide con su atributo de patrón, la propiedad 'patternMismatch' se establece en 'true'.

💡Atributos de rango

Los atributos de rango, como 'min' y 'max', definen los límites numéricos que un valor debe cumplir. En el video, se establecen estos atributos para un campo de número, permitiendo que el usuario ingrese un valor entre 100 y 300, y se utiliza para demostrar cómo se aplican estas restricciones.

💡Atributo required

El atributo 'required' indica que un campo de entrada es obligatorio. En el script, se establece este atributo para un campo de número, lo que significa que el usuario debe ingresar un valor en ese campo antes de poder enviar el formulario.

💡Propiedad valueMissing

La propiedad 'valueMissing' se establece en 'true' si un elemento con el atributo 'required' no tiene un valor. Es un concepto importante en el script, ya que se utiliza para identificar si un campo obligatorio ha sido dejado sin completar por el usuario.

💡Propiedad typeMismatch

La propiedad 'typeMismatch' se establece en 'true' si el valor de un elemento no es válido según su atributo de tipo. Aunque no se menciona explícitamente en el script, es un concepto relevante para la validación de datos, especialmente cuando se trata de tipos de entrada específicos como 'email' o 'number'.

Highlights

En este capítulo se discute el lápiz de validación en JavaScript.

JavaScript tiene métodos de validación de restricciones con el lápiz de validación.

El método 'checkValidity' devuelve si un elemento de entrada es válido.

El método 'setCustomValidity' establece la propiedad 'valida' de un elemento de entrada.

Se mencionan propiedades importantes relacionadas con la validación de restricciones.

La propiedad 'validity' contiene booleanas relacionadas con la validez de un elemento de entrada.

La propiedad 'validationMessage' muestra el mensaje cuando la validez es falsa.

La propiedad 'willValidate' indica si un elemento de entrada será validado.

Se presenta una tabla con propiedades de validez de un elemento de entrada.

La propiedad 'customError' establece un mensaje de validez personalizado.

La propiedad 'patternMismatch' se establece si el valor no coincide con el patrón.

La propiedad 'rangeOverflow' se establece si el valor es mayor que el atributo 'máximo'.

La propiedad 'rangeUnderflow' se establece si el valor es menor que el atributo 'mínimo'.

La propiedad 'stepMismatch' indica si el valor no es válido según su atributo.

La propiedad 'tooLong' establece si el valor de un elemento es más largo que el atributo 'maxlength'.

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

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

Se muestra un ejemplo de cómo funciona la validación de JavaScript con código HTML y JavaScript.

Se explica cómo utilizar el método 'checkValidity' en un campo de tipo número con rangos específicos.

Se crea una función en JavaScript que utiliza el método 'setCustomValidity' para mostrar mensajes de validación.

Se menciona que el lápiz de validación utiliza el idioma del navegador para mostrar mensajes.

Se presentan ejemplos de cómo personalizar mensajes de validación y utilizar propiedades adicionales.

Se invita a seguir el curso gratuito de JavaScript desde cero en el próximo capítulo.