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

[@AlejandroDiaz-te4ey]

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

[@jonmircha]

👋🏻😉

[@Angel-zr2qm]

Muchas gracias me ayudo con el error que me salia

[@ism79]

Muchísimas gracias, Alejandro! No sabía porque me daba error en la consola! Un saludo!

[@domest5025]

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!!!!

[@jonmircha]

🤗

[@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

[@jonmircha]

jejeje

[@timawid]

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

[@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!!

[@instintoimagen]

es el mejor #curso de #javascript

[@jonmircha]

😉🙌🏻

[@JuanDGamba]

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

[@jonmircha]

Excelente!

[@giovannyvanegas88]

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

[@jonmircha]

👋🏻😉

[@r.w.s.2402]

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

[@jonmircha]

😉👍🏻

[@addevmoises]

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

[@jonmircha]

;)

[@Wiiiiizard]

🧙‍♂Muchas gracias, buen curso!!!

[@jonmircha]

Gracias por comentar

[@victormeza8858]

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

[@jonmircha]

Excelente!

[@maximilianodesantis2215]

.contact-form [required]:invalid:not(:focus):not(:placeholder-shown){ 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

[@jonmircha]

😱🤓👌🏻

[@matiasromera330]

por comentarios como éste es que los reviso cuando termina el video, un 10 hermano!

[@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.

[@jonmircha]

;)

[@seica5561]

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

[@jonmircha]

Excelente :)

[@sabrinvr1]

Chulada de curso, gracias!

[@jonmircha]

Muchas gracias!👋🏻😉

[@josefabianbeltranmeza6914]

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

[@jonmircha]

Gracias 👍

[@paulpaucarb]

jon estoy asiendo este formulario y estoy aprendiendo mucho♥

[@jonmircha]

:) Excelente

[@heimancastro1954]

buena clase maestro

[@jonmircha]

👋🏻😉

[@jurrrgenOF]

muy completo como siempre

[@jonmircha]

Gracias! 😊

[@brianalexisalmada6522]

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!

[@jonmircha]

😉👍🏻

[@elweonweandolaweafome]

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

[@jonmircha]

😎👋🏻

[@qybit777]

Excelente 👍👍

[@jonmircha]

😉👋🏻

[@davidm.8835]

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.

[@gervasi7254]

te amo mirchaaaaa crack

[@denseydelgado3779]

Gracias Jonh

[@jonmircha]

Con gusto

[@matiasgomez9416]

Genial!

[@ronalddavidhernandezpadill8182]

I have finished this exercise, I will see your solution now

[@jonmircha]

👋🏻😅

[@vegaimagen9075]

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

[@jonmircha]

Que bueno :)

[@emersonpalaciootalvaro2632]

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

[@cleimangerman]

Buenisimo

[@jonmircha]

🤓👍🏻

[@carlesbautista8293]

Muchas gracias Jon por todo :)

[@jonmircha]

Con gusto

[@hardisonpaulino8846]

🙌🙌🙌🙌

[@jonmircha]

👋🏻😉

[@helipalacio8772]

👏👏👏 🙏🙏🙏

[@jonmircha]

👋🏻😉

[@srcuyo]

jon GOD mircha

[@Alex-iv3nv]

Jhon solo tengo agradecimiento por tan buenos tutoriales de manera gratuita que nos ofreces, quisiera hacerte una recomendación y espero no me la tomes a mal, trata de hablar un poco mas retirado del microfono, es que a veces me quedo sordo de repente cuando te acercas demasiado a él y suben demasiado los decibeles de los videos, jajaja. De nuevo gracias mil, no es una queja es solo una recomendación, pues hay muchos otros que imparten tutoriales como los tuyos quizas con un audio mas delicado pero jamas con la misma calidad y capacidad de enseñanza que tu tienes hermano, un gran abrazo bendiciones...

[@jonmircha]

😉👋🏻

[@carloseduardogomezlozano491]

Buenos dias. Cómo se realiza que el 'placeholder' se mueva por encima cuando se tenga el foco en el input?. Gracias.

[@fedeverges6343]

Excelente video!

[@jonmircha]

Gracias!

[@angelabrahamlopezdelgado7574]

Me gustaria mi buen amigo jon, que hablaras con respecto a la seguridad de datos , y que mas de algun porgramador puede acceder a ese tipo de funcionalidades en el inspector , ya que lo formulario son la principal entrada de script y toca datos delicados del LocalStorage, o sql injection

[@jonmircha]

Eso más que estar en el front es responsabiidad del back validar y proteger contra esos ataques, recuerda que todo lo que es front se puede inspeccionar

[@genecles]

Hola Jon. Excelente video!!! Solo una consulta... Desde el punto de vista de seguridad los atributos HTML "required" y "Pattern" pueden ser manipulados fácilmente por el inspector de elementos. En ese sentido, entiendo que eso sería más un recurso de apoyo pero igual hay que validad con js y supongo que en el caso que se envien los datos a un servidor también validarlos con php para mayor seguridad. ¿Cierto?

[@jonmircha]

Independientemente de la validación front tienes que hacer validaciones en tu back

[@Alehophophop]

buscaba esta pregunta :)

[@alexcastello345]

Gracias gracias gracias

[@jonmircha]

;)

[@helipalacio8772]

👏🏻👏🏻👏🏻 🙏🏻🙏🏻🙏🏻

[@jonmircha]

😉👋🏻

[@jerrysdn5550]

Hola Jon, como siempre, excelentes tus clase que muy amablemente nos compartes, una consulta sobre validaciones, si uno por ejemplo quiere validar un correo en específico, me refiero al dominio, que se valide solo esa cadena de texto que es el dominio, ¿cómo sería? Nuevamente gracias por tu invaluable aportación

[@reyns8059]

te refieres a algo como solo validar que tengan "gmail.com" o "hotmail.com" y asi? La verdad no puedo responderte como tal porque debo hacer un repaso pero si te recomiendo que pases por el canal de "FalconMasters", sus 3 últimos videos son sobre formularios y validaciones incluso con JS, pero como tal el que me ayudó a entender mejor cómo se construyen es uno que dice guia sobre expresiones regulares o algo así. Te lo recomiendo totalmente para que complementes sobre el tema, a mi me ayudó mucho a entender esto cuando estuve inventando cómo sería maquetar una página y quería que mis validaciones fueran "personalizadas" xD pero también te aconsejo que las busques en google, la verdad hoy por hoy ya muchas expresiones regulares están hechas y compartidas en la web solo es cuestión de copiarlas, aunque si te recomiendo que no solo copies, sino que entiendas. Suerte!

[@matiasmarcelocentorbi7659]

Buenas victor, ya que de cualquier forma la seguridad de los formularios hay que hacerlas con el backend, tu crees que es mejor usar html5 para validarlos desde el front o seguir usando js? PD: Es el mejor curso que vi.

[@jonmircha]

Yo uso una mezcla de ambos html y js ;)

[@NonsenseIsOver]

Profe, y si un usuario dañino borrara el atributo "pattern" desde el inspector de elementos, ¿nos quedaríamos sin validación?

[@jonmircha]

Sí por eso siempre hay que validar en JS y en el back

[@mundomagupe6088]

y sin javascript super !!

[@jonmircha]

😉👍🏻

[@braianrico4422]

🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

🙌🏻🙌🏻🙌🏻

[@sanchez-emir]

en el data-pattern del txtarea le puedo poner cualquier otro nombre, profe ?

[@jonmircha]

Mientras empiece con data- , si

[@carloscontreras6051]

Nota a mi mismo, no debo pausar los videos. Dibuje un loader.svg y estuve media hora para que gire. Al rato, Jon muestra las @keyframes 🤦🤦🤦

[@jonmircha]

🤣🤣🤣🤣 kzbin.info/www/bejne/o4fLoHqOoKmVg9k

[@NonsenseIsOver]

Profe, si pongo un email tipo "[e-mail]" no lo toma como válido la expresión regular

[@jonmircha]

:O

[@SofiDev]

Me pasa lo mismo, incluso poniendo emails reales, que uso. Me dice , "haz coincidir el Formato solicitado" 😢

[@negociosonlyne1814]

Profe es recomendable usar javascript para juegos o hay un lenguaje más específico para ese tipo de tareas?

[@jonmircha]

Depende del Engine con el que trabajes

[@joseeduardovasquez5064]

Me estaba dando error tu regex de correo, hice este ^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9]+-*[a-z0-9]+\.[a-z]{2,15}$, por si alguien tiene problemas con el regex

[@jonmircha]

👋🏻😉