Validaciones de formularios HTML sin JavaScript
Contenido del curso
Validaciones de formularios HTML sin JavaScript
Contenido del curso
Santiago Muñeton Hernandez
Ismael Fierro
Natalia Rodriguez
Ismael Fierro
Gabriel Alvarado
Hector Daniel Ortíz Sis,
Adolfo Ortíz Bravo
Formación Onlines
Miguel Ángel Juárez Guerrero
Marvin Alejandro Matías Jiménez
Pedro Arnoldo Asicona anay
Héctor Antonio Flores Estrada
César Gregorio Delgado Scott
Joel Dominguez Merino
Jairo Mendoza
Diego ferney Cárdenas Hoyos
Aura Bello
Ezequiel Choque
Carlos Rubén Díaz Gutiérrez
Jesús Ynuma
Ismael Fierro
Dario Mendoza
Melgar Eswin Choc Chub
Darwin Yeferson Osvelí Cucul Yaxcal
Axel Rene Caal Ical
Walter Enrique Maldonado Silvestre
Gwyliam Pcl
miguel ángel caal pop
Jhon Freddy Tavera Blandon
DANIEL JARAMILLO GÓMEZ
Brandon Douglas Arana Martinez
Seba Cardoso
Kenneth Angulo L
Kenneth Angulo L
En esta clase aprendemos sobre los atributos que permiten validar formularios directamente desde HTML, sin usar JavaScript. Estos ayudan a mejorar la experiencia del usuario y la calidad de los datos.
placeholder: Muestra un texto guía dentro del campo, indicando qué debe ingresar el usuario.minlength: Define la cantidad mínima de caracteres que se deben escribir.required: Hace que el campo sea obligatorio antes de enviar el formulario.pattern: Usa expresiones regulares para validar un formato específico (por ejemplo, correos o contraseñas).min / max: Establecen límites numéricos o de fechas.title: Muestra un mensaje o sugerencia personalizada al pasar el cursor o cuando el patrón no se cumple.console.log("Nunca pares de aprender 💚");
Se pone bueno...!
Esta Increible
Ejemplos de validaciones basicas:
Todas esas validaciones se pueden hacer en el propio html con el "pattern" verdad? yo solo conozco un poco las validaciones que se hacen en php y javascrip pero sigo algo perdido.
muy bueno
ESTUDIOSO
En el minuto 8:28 dice que hace falta declarar un value y luego rellenarlo con javascript, pero no termino de entender si efectivamente es correcto. Al momento de submitear el html debería envial el value correspondiente de manera automática, independientemente de si es un input numérico o no. El caso de los checkbox o los radio lo entiendo, porque cada boton tiene que tener un value asociado a si mismo que se asocie al nombre compartido entre varios.
En este caso, si asignas un valor al atributo value solamente será para que cuando el usuario ingrese a tu sitio el input tenga asignado un valor por defecto y el campo Cantidad no aparezca vacío, si tomamos el ejemplo que dijo de "vender productos", podrías asignar la cantidad que consideres que es la más elegida para un producto en particular y así el usuario no tiene que volver a escribir esa cantidad, esto para mejorar la experiencia del usuario, por ejemplo.
éxito para todos los que están siguiendo
REQUIRED
The required attribute is your form's bouncer. Slap it onto any input, and the browser refuses to let the user submit until that field actually has data. No JavaScript needed.
When a user tries to skip it, the browser steps in with a native tooltip warning. Where else might you want to enforce this besides an email field?
Alguien me explica como hizo lo del minuto 11:22, entiendo que sombrea todos los imputs y le da algun comando ( el dice comentar), luego al cargar el navegador solo aparece el input de contraseña.
Sorry creo que es algo bastante básico, pero en mi caso estoy aprendiendo HTML desde cero, no se nada, entonces esos pequeños detalles son importantes manejarlos.
tengo entendido que se usa para comentar el codigo, lo hizo mas que todo para resaltar la parte final del codigo y que vs code no tome en cuenta lo demás.
Lo que hizo el profesor fue comentar un bloque de código, al comentarlo lo que hace es que no se lee ese código y por ende cuando vamos al navegador no lee el código comentado.
Para comentar un bloque de etiquetas de HTML puedes hacer manualmente añadiendo al inicio del bloque /* y al final */ Ej:
/* etiqueta etiqueta etiqueta ... */
Y tambien si estas en Visual Studio Code puedes usar atajos del teclado que ya vienen por defecto. Para esto ve al Tab de Edit dentro de Visual y ahí te saldrá el atajo a utilizar dependiendo de tu Sistema Operativo.
Nunca me funcionó el pattern, cuando se abren las comillas a mi me salen naranja y a el profesor azules es como si a mi no se me ejecutara la etiqueta y el codigo no me funciona
Hola, no te funciona porque dejaste un espacio. Debe ser así: pattern="[0-9]{9}" Por el color no te preocupes que a mí no me sale azul y me funciona. Lo importante es que funcione en el navegador.
Hola, aunque ese type del input de teléfono para impedir que se llene el campo con letras y disminuir el error por parte del usuario, podría definirse como "number" de entrada, verdad?
No, lo que se quiere es tu numero de telefono, pueda que estes en pc o desde el movil entonces al poner el type tel ya estas condicionando como es que se vera en el movil y haciendo como el profe poniendo pattern aplicas esa validacion del numero dependiendo del pais que seas y queda mas correcto de esa manera.
No es recomendable utilizar type="number" para un número de teléfono, ya sea por semántica, accesibilidad, etc.
Una consulta: en la sección de contraseña se colocó el atributo minlength="8".
¿Podríamos usar aquí pattern="{9}" por ejemplo, en su lugar? O, viceversa, en el campo de teléfono —donde se usó un pattern, ¿podríamos reemplazarlo con minlength="9"?
Hola!
minlength va orientado solo a validar la longitud de caracteres.
pattern es más para con expresiones regulares validar el patrón de la cadena.
Un ejemplo sería: Si solo quiero validar la longitud minima de la contraseña uso minlength, pero si en cambio, quiero exigir un minimo de caracteres y que tenga siempre caracteres especiales, entonces uso pattern para que el navegador evalue si se cumple ese patrón en la cadena evaluada.
Las validaciones de formularios HTML son fundamentales para asegurar que la información ingresada por los usuarios sea correcta y completa. Utilizando atributos como required, puedes indicar que ciertos campos son obligatorios. Para validar formatos específicos, atributos como pattern permiten establecer expresiones regulares. Por ejemplo, para un campo de email, el navegador puede verificar automáticamente si el formato es válido. Estas validaciones mejoran la experiencia del usuario y optimizan el envío de datos. Para profundizar, revisa el contenido del curso de HTML en Platzi.
hola kender
wey
Hi. Regarding that phone input type—to prevent the field from being filled with letters and reduce user error—it could be defined as "number," right?
Gracias por todo su tiempo !!
ssss
se te olvidan pues
¡Jaja, touché! Las etiquetas no se me van a olvidar, pero a ti veo que se te escapa cómo exigir un campo obligatorio.
A ver, ¿cómo se llamaba ese atributo clave que detiene el envío si el input está vacío?
¿Cuándo debería restringir las fechas del calendario?
Debes restringir las fechas siempre que tu lógica de negocio dependa de un marco temporal estricto. Por ejemplo, si estás creando un sistema de reservas de hotel, no tiene sentido permitir que un usuario seleccione una fecha en el pasado.
Usando los atributos min y max en un input de tipo date, puedes bloquear visualmente los días inválidos en el calendario nativo del navegador. Si configuras min="2024-01-01", todos los años anteriores aparecerán deshabilitados. Esto es increíblemente útil para validar la mayoría de edad en un registro, limitar la vigencia de una promoción o agendar citas médicas solo dentro del mes actual, mejorando drásticamente la usabilidad de tu interfaz.
tambien puedes usar control + } y se crea el comentario
excelente expliccaiones de este don
Si eso es cierto
Si el profesor Granda es de los que explican con claridad
¿Cuándo debería restringir las fechas del calendario?
Debes restringir las fechas siempre que tu lógica de negocio dependa de un marco temporal estricto. Por ejemplo, si estás creando un sistema de reservas de hotel, no tiene sentido permitir que un usuario seleccione una fecha en el pasado.
Usando los atributos min y max en un input de tipo date, puedes bloquear visualmente los días inválidos en el calendario nativo del navegador. Si configuras min="2024-01-01", todos los años anteriores aparecerán deshabilitados. Esto es increíblemente útil para validar la mayoría de edad en un registro, limitar la vigencia de una promoción o agendar citas médicas solo dentro del mes actual, mejorando drásticamente la usabilidad de tu interfaz.