Curso JavaScript desde 0: APIS WEB (API de Validación) - 89
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
📝 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.
🛠 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
💡Método checkValidity
💡Método setCustomValidity
💡Propiedad validity
💡Propiedad valid
💡Propiedad customError
💡Atributos de patrón
💡Atributos de rango
💡Atributo required
💡Propiedad valueMissing
💡Propiedad typeMismatch
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.
Transcripts
en este capítulo vamos a hablar sobre el
lápiz de validación en javascript
javascript cuenta con ciertos métodos de
validación de restricciones lápiz de
validación de javascript permite validar
formularios html el método check bality
devuelve si un elemento de entrada
continuidad oválidos el método se
customility establece la propiedad
válida y6 de un elemento de entrada o
input si un campo de entrada por ejemplo
un impul tipo número o de número
contiene datos no válidos el método
check varita y de lápiz de validación
muestra un mensaje en la siguiente
pantalla veremos algunas propiedades que
debemos conocer
por ejemplo las propiedades de un
devalidación de restricciones la
propiedad validity contiene propiedades
boleanas relacionadas con la validez de
un elemento de entrada
la propiedad valida de un V6 contiene el
mensaje que mostrará un navegador cuando
la validez sea false
Will validay esta propiedad indica si se
validará un elemento de entrada
Y por último veamos esta tabla con las
propiedades de validez las propiedades
de validez de un elemento de entrada un
input contiene una serie de propiedades
relacionadas con la validez de los datos
la propiedad custom error establece
bueno establecido si se establece un
mensaje de validez personalizado
la propiedad misma estableció en true si
el valor de un elemento no coincide con
su atributo de patrón
la propiedad Ranger establecido si el
valor de un elemento es mayor que su
atributo máximo la propiedad Range un
delfín estableció en true si el valor de
un elemento es menor que su atributo
mínimo la propiedad Smith estableció el
valor de un elemento no es válido por su
atributo y paso la propiedad Tulum
establece el valor de un elemento exceso
atributo
la propiedad tipo de Smash estableció en
true si el valor de un elemento no es
válido según su atributo de tipo la
propiedad value missing estableció en
true si un elemento con un atributo
requerido no tiene valor la propiedad
Valley estableció introducir valor de un
elemento es válido
también si el número de un campo de
entrada o es mayor que 100 el atributo
más de la entrada muestra un mensaje
o cualquier otro valor aparte de 100
veamos ejemplos en el código de cómo
funciona esta pie de validación de
javascript acá al lado izquierdo tengo
mi código html el lado derecho de la
página html aquí al lado izquierdo tengo
el código llave Script de esta página
html
vamos a borrar este botoncito que se
muestra la ubicación que fue del
capítulo anterior
vamos a hacer otros elementos nuevos OK
Por ejemplo vamos a hacer uso
del método
este acá
check
vale vamos acá entonces crear
debajo vamos a actualizar debajo de mi
título acá mismo vamos a colocar un
input con un botón
en número ese tipo número
con tip número le decimos que sólo puede
ingresar números a ese campo
Vamos a ponerle
y
Vamos a ponerle
mi campo Sencillamente
vamos a poner un atributo mínimo de 100
en atributo máximo
de 300
y que sea rico aire requerido
obligatorio que el usuario lo ingrese
acá vamos a colocar un botón
y le agregamos el atributo de venta un
clic que llame a mi función esta función
la vamos a explicar
funciones la manera ordenada ejecutar
código
vamos a presionar vamos a escribir un
texto que dice si grabo y actualizo y
acá aparece solo para ingresar números
no puedo bajar a menos de 100 solo subir
arriba hasta máximo ya que acá Aquí
puedo mínimo un valor de 100 poner y un
máximo de 300 vamos a escribir
manualmente 300 si escribo más de 300 ya
no me permite ya que acá en el campo le
hemos establecido un mínimo de 100
máximo de 300 Vale
ahora vamos acá a llave Script vamos a
escribir esta función
y función
Recuerda que mi función este nombre que
le gusta acá lo llamamos acá esta
función cuando presionamos el botón Ok
voy a llamar a la función esta de aquí
mi función ahí voy a quedar una
constante llamada y
yo de empuje tú lo puedes poner el
nombre variable que desee no hay
problema
ahora Este ejemplo voy a usar así loco
un punto ya que Element
y vamos a poner la calidez del elemento
y de mi campo
debajo vamos a hacer
luego le pasamos este método de acá que
menciona la diapositiva check Valley
es lápiz de validación es un método de
la piel
luego acá entre llaves vamos a hacer un
documento
de acá vamos a mandar un mensaje dentro
de un párrafo p Vamos a ponerle datos
o mensaje
html y ahí vamos
a pasar un punto
este elemento con idea de mensaje lo
vamos a crear acá en debajo
el botón vamos a quedar acá
vamos a mostrar los mensajes de
validación que llamamos ese elemento
comida de mensaje
luego casi no
Igualmente hacemos un documento
y ahí Igualmente llegamos al momento del
párrafo con y de mensaje
más punto y html pasamos el mensaje
ok
bien ahora acá hay que ponerle acá en el
If
el layo que ponerle
una negatividad no decimos si no no hay
disponibilidad o no hay elementos le
mostramos un mensaje a ver si si el
usuario no ingresa algún valor a este
campo de aquí Entonces vamos a
actualizar y probar si presiono Ok y no
me dice automáticamente completa este
campo este texto yo no lo he escrito
una parte del código automáticamente el
lápiz de validación usa el idioma del
navegador si el usuario está en Italia o
en Estados Unidos o en Japón le vamos a
estar en su idioma este texto como yo
estoy en España en el perdón en en Perú
en una zona que se habla español cuando
ingreso me muestra el mensaje en español
completa este campo vale Y por ejemplo
Yo acá le pongo 100 o 105 presionó que
me dice ok acá sí ya me mostramos el
mensaje que es ingresado todo Ok
y así podemos hacer uso de otros métodos
de apio elevación
pero conociendo
está aquí al menos el que hemos probado
ahorita el método
podemos hacer uso de
estas propiedades de Lápiz por ejemplo
vamos acá tenemos custom error batter y
varios más en la diapositiva te voy a
dejar estas propiedades y la puedes
utilizar en tu proyecto de validación
bien hasta aquí este capítulo sobre la
privación del curso gratuito de
javascript desde cero nos vemos en el
siguiente capítulo
5.0 / 5 (0 votes)