visita: https://app.aluracursos.com/course/javascript-web-validacion-formularios-html5
INSTRUCTOR: Harland Lohora
- Linkedin: https://www.linkedin.com/in/harlandlohora/
- Github: https://github.com/HarlandLohora
- Valida formularios utilizando las herramientas de HTML5
- Crea tus propias validaciones customizadas utilizando técnicas actuales con JavaScript
- Aprende a aplicar una máscara monetaria en campos de precio
- Aprende a subir tu código a producción
🧨 Validaciones con HTML
-
Presentación
-
Preparando el ambiente
-
Atributos de validación
-
Atributo type
- HTML nos regala algunas herramientas para la validación de formularios. Una de ellas es el atributo
type
. Este atributo hace validaciones, por ejemplo,type=email
, que verifica si la estructura que fue escrita está en un formato válido. - Ejemplo:
<input type="date">
- HTML nos regala algunas herramientas para la validación de formularios. Una de ellas es el atributo
-
Haga lo que hicimos en aula
-
Lo que aprendimos:
- Hacer validación en el propio HTML utilizando los atributos
required
ytype
. - Utilizar reglas del regex dentro del atributo
pattern
para validar el campo de contraseña. - Mandar un mensaje customizado de error en el navegador.
- Hacer validación en el propio HTML utilizando los atributos
🧨 Validación de contraseña
-
Proyecto del aula anterior
-
Regex para contraseña
-
Haga lo que hicimos en aula
"Practicar ayuda mucho en el aprendizaje de un nuevo concepto"
-
Lo que aprendimos
- Crear funciones para validaciones del formulario.
- Definir mensajes customizados para validaciones fuera del HTML.
- Utilizar data attributes para trabajar con JavaScript.
- Dejar la función de validación más genérica para funcionar con cualquier
input
.
🧨 Validación de fechas
-
Proyecto del aula anterior
-
Fecha de nacimiento
-
Trabajando con validity:
- Hemos visto que para enseñar mensajes de error podemos utilizar el atributo
title
. En JavaScript también es posible tratar los errores de validación utilizando la propiedadvalidity
delinput
, como utilizamos en la validación customizada del campo “fecha de nacimiento”.input.setCustomValidity('Mensaje customizado de error')
- Hemos visto que para enseñar mensajes de error podemos utilizar el atributo
-
Mejorando el código
-
Para saber más:
- Regex: https://regexr.com/
-
Haga lo que hicimos en aula
"Practicar ayuda mucho en el aprendizaje de un nuevo concepto."
-
Lo que aprendimos
- A validar fechas en nuestro formulario.
- A utilizar expresiones regulares para mejorar la validación de nuestro formulario.
🧨 Mensajes customizados
-
Proyecto del aula anterior
-
Live Server y Browser Sync
-
Para saber más:
- Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
- Browser Sync: https://browsersync.io/
-
Mostrando mensajes de error
-
Tipos de errores
-
Mensajes del navegador
- Cuando existe algún error de validación en el formulario aparecerá un mensaje arriba del campo explicando o dando algún tip para corregirlo. Pero en el proyecto existe una estilización y una tag
<span>
para enseñar un mensaje de error directo en el HTML.
- Cuando existe algún error de validación en el formulario aparecerá un mensaje arriba del campo explicando o dando algún tip para corregirlo. Pero en el proyecto existe una estilización y una tag
-
Haga lo que hicimos en aula
"Practicar ayuda mucho en el aprendizaje de un nuevo concepto. "
-
Lo que aprendimos
- A instalar y utilizar el plugin Liveserver.
- Como descargar y correr el Browser-Sync.
- Como enseñar el mensaje de error directamente en el HTML.
- Como customizar los mensajes de error de validación.
🧨 Completando el formulario
- Proyecto del aula anterior
- Completando formulario I
- Completando formulario II
- Haga lo que hicimos en aula
"Practicar ayuda mucho en el aprendizaje de un nuevo concepto."
-
Lo que aprendimos
- Como validar formularios.
🧨 Tu proyecto en línea
- Proyecto del aula anterior
- Para saber más: Proveedores para sitios estáticos
- GitHub Pages: https://pages.github.com/
- Vercel: https://vercel.com/
- netlify: https://www.netlify.com/
- Haga lo que hicimos en aula
- Proyecto final
- Lo que aprendimos
- A subir tu proyecto a producción.
- Conclusión