Curso JavaScript: 101. DOM: Ejercicios Prácticos | Validación de Formularios con HTML5 - #jonmircha

En este video de ejercicios del #DOM de #JavaScript te enseño a validar formularios con #HTML5.

Aquí te dejo las expresiones regulares que ocupo en el video:

- Nombre: ^[A-Za-zÑñÁáÉéÍíÓóÚúÜü\s]+$
- Correo: ^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$
- Comentarios: ^.{1,255}$

[domest]

Todavia no puedo creer que exista una persona como jon que dedique todo el tiempo que dedica para enseñarnos todas las tecnologías en sus cursos y encima si le mandas una pregunta te responde... Una persona de otro planeta... Sos un genio jon!!!!

[dvesc]

@jonmircha me quede así :0 cuando dijo que se podían usar expresiones regulares en HTML
PD: Este curso es la ostia, aprendo mas aquí que en la uni O_o

[FedericoAlemany]

Muy buen contenido Jon, muchas gracias por compartirlo. El único detalle que quiero mencionar, es que si utilizas el atributo "title" para un mensaje de validación (como "email incorrecto"), también se muestra al pasar el mouse sobre el elemento (aún cuando esté en blanco o tenga un valor válido).
Gracias por esta serie de vídeos, saludos!!

[timawid]

✅Estoy aprendiendo muchísimo ⭐️⭐️⭐️⭐️⭐️

[davidm.]

Muy interesante el tema de formularios y sus validaciones . Cómo siempre he aprendido de tus pequeños truquillos que tanto ayudan. Impaciente a ver siguiente! Gracias.

[JuanDGamba]

En Edge Canary el navegador hace lo mismo que Chrome con los campos del formulario.
Excelente video.

[victormeza]

Eres un genio Jon!, mil gracias, sigo con tu curso, aprendiendo cada dia

[seica]

JOn.. Excelentes Videos.. Y los de los formularios es vital..para mi.. LA validaciones necesarias..Ciao. Sigo Viendo tu video

[kikemadrigalr]

Saludos Jon. Saludos a los compañeros. me reporto por acá nuevamente para ponerme al día con el curso. Antes de ver el video ya tenia mi maquetado del formulario. Pero el contenido del vídeo no tiene desperdicio. No había utilizado nunca el atributo patter en los inputs, y primera ve que veo en practica las pseudoclases valid e invalid. Sin duda cosas muy útiles.

[r.w.s.]

Me ha encantado tu manera de crear formularios. He aprendido algunas cosas que no sabía. Eres un gran profesional

[vegaimagen]

Jon gracias por este video, sobre todo css, los formularios que yo hacia era muy normalitos, mas bien feitos jaja ahora con la clase de hoy ya quedaran mas actractivos, diagamoslo asi...gracias

[admoises]

que genial el atributo pattern, no lo conocía, es muy útil validar así con las expresiones regulares. Genial todo lo que se puede hacer con formularios y eso que es la 1ra parte

[giovannyvanegas]

Excelente Jon, no sabia algunas pseudo clases, estoy aprendiendo demasiado con este curso.

[paulpaucarb]

jon estoy asiendo este formulario y estoy aprendiendo mucho♥

[josefabianbeltranmeza]

Gracias Jon. Nuevamente renovando mi suscripción, apenas pueda subo de mecenas.

[emersonpalaciootalvaro]

Jhonatan, nos puedes explicar como colocar una venta de dialogo de watsapp, seria algo genial gracias. 💪

[brianalexisalmada]

O sea, si ya eres un gran profe por las explicaciones que das encima aumentas el valor de este curso dejando las expresiones regulares en la caja de descripción del video, jeje. Muchas gracias Jon, estoy aprendiendo tanto!

[AlejandroDiaz-teey]

Para los que no les funcione la validación del correo no olviden escapar también los guiones al final, - Correo: ^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9\-]+(\.[a-z0-9\-]+)*(\.[a-z]{2, 15})$ de esta manera ya funcionara de manera correcta ya que en las clases de caracteres (dentro de corchetes []) en una expresión regular, los guiones se utilizan para definir rangos de caracteres. Para evitar confusiones, los guiones dentro de una clase de caracteres deben escaparse con una barra invertida \.

[maximilianodesantis]

.contact-form
border: thick solid var(--form-error-color);
}

solo mostraria un recuadro rojo al detectar que el placeholder esta vacio y ya no tiene focus el input

[elweonweandolaweafome]

El curso de HTML y CSS numero 3 termina justo donde empieza este capitulo 101