Aprende a Validar Formularios con Javascript y Expresiones Regulares
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- En este tutorial aprenderás como validar formularios de forma profesional utilizando Javascript y Expresiones Regulares.
Mis cursos de desarrollo web:
⭐ Curso Completo de Diseño Web Profesional:
www.desarrollo...
⭐ Curso Completo de React y Firebase:
www.desarrollo...
⭐Curso Completo de Javascript
www.desarrollo...
⭐ Curso Completo de PHP y MYSQL:
www.desarrollo...
⭐ Curso de Bootstrap 5:
www.desarrollo...
⭐ Curso Completo de creación de tiendas online:
www.desarrollo...
---
📄 Código del Proyecto: github.com/fal...
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters
Si te gusto esta serie dale manita arriba, lo aprecio mucho 👍
carlos porque no usas linux ?, me gustaría verte usando una distro, linux te ofrece un gran entorno de desarrollo si eres dev web, te gusta o no linux ?, bro tienes que probar ubuntu en su versión 2020,soy tu fan numero #1
@@dj0000 Hola Jansel, la verdad es que estoy agusto con windows, ademas de que la mayoría de las cosas que juego solo están para windows.
@@FalconMasters bueno a cada quien lo suyo a cada programador le gusta un distinto entorno de desarrollo, con wine puedes traer a linux todo lo que te gusta, pero
cada dev tiene su forma de programar.
el mejor sistema es el que se adapta a tus necesidades.
por sierto falcon eres dev full stak, backend o fron end ?
Carlos Arturo hola eeeee porfa se que debes estar ocupado pero necesito tu ayuda sálvame porfa , yo uso sublime text 2 y bueno quiero insertar un vídeo pero no funciona lo que puse fue esto:
Pero no funciona no da señales de nada y tu eres quien sabe mucho de eso algo que me aconsejes o algo hice mal o necesito otra etiqueta porfa si ayúdame con eso
Esque no se porque yo uso Windows 7 profesional y de navegador uso Mozilla Firefox y bueno no sé
@@Mr.Sam1101 no creo saber mucho pero esa etiqueta no será así? oséa con V minúscula y sin acento en la i.
Comencé esta serie. Muy emocionado. Mencionaste terminos de Css Grid que no entendí, así que me fui a ver toda la seria de css grid. Por fin lo terminé y me dije "Ahora sí, a continuar con el formulario!!". Ahora mencionas "expresiones regulares", así que ya voy para allá.
¿Algún día terminaré mi formulario? 😂😂😂
Estoy aprendiendo mucho y estoy muy agradecido contigo Carlos. Pdata: Te conocí en tu curso de Udemy y ha sido la mejor inversión que he hecho en mi vida. Saludos desde Colombia
jsjsj Igual, habia estado evadiendo esas expresiones regulares pero ya todo sjsj
Acabaste tu formulario amigo?
Hola, excelente aporte, es el mas completo que vi, te Felicito, estaría bueno que hubiera un tercer video en el cual se mostrara el envío a una base de datos remota o interna, en el cual chequeara antes de guardar los datos que el usuario, correo no estén repetidos.
Saludos desde Argentina...
Muy de acuerdo
x3
Igual eso seria brutal por que no he hallado ningun video tutorial con esa caracteristicas
x4 sería el complemento perfecto!
Después de 4 años de hhaber subido este video Sigue siendo EXCELENTE espero que sigas subiendo mas videos como este
Vengo desde los vídeos de Html, que fueron subidos hace 6 años, vengo a ver estos que son recientes, y vaya que si le ha cambiado la voz :3. PDTA: soy fiel seguidora.
Si yo también lo note, :D
Ojalá fueras mi profesor, en serio excelente video. Me encanta cómo es que explicas cada línea de código. Sigue así !!
Totalmente
talcual, ademas explica el porque, lo verifica en conosolo, no se enrreda con la explicaci{on, el mas completo y el mejor video explicado que vi !!!!
Listo, ya los dos videos! bastante interesante y con esto me da más seguridad para seguir el curso
La mejor explicación de validación de formulario que he visto hasta ahora, muy bien estructurado y explicado, muy buen video Carlos. Estoy a punto de terminar un CFGS DAW en España y ojalá te hubiese tenido de profesor, porque para explicar la validación de formularios nos remitieron a la documentación de JavaScript y a que investiguemos. Han usado lo de investigar cada vez que se han querido ahorrar la explicación, es una vergüenza algunos profesores que por desgracia me han tocado en el ciclo de Desarrollo de Aplicaciones Web. Muchas gracias Carlos
Llorar a la lloreriaaa 😢😢
Me gustó mucho ésta practica, vengo de la practica de formulario en udemy y aunque hay conceptos que aún no hemos visto en udemy creo que lo diste a entender bastante bien. gracias por el contenido! :D
vengo de la misma clase xd
y terminé el video btw.
He estado trabajando con su código y ha sido muy bueno pero me gustaría que enseñaras como validar los select tal cual como lo hiciste con este video. Se le agradecería 🙏
y como se validaría y conectaría este tipo de formulario con php y mysql?
Geniales ambos videos, si los concluí, hay mucho que aprender, ya empecé con tu curso de Bootstrap 5
Cómo es que aprendiste tanto gracias a ti estoy aprendiendo me estoy iniciando en la maquetación de web
Ótimo vídeo parabéns 👏 show demais ótima explicação pelo menos eu entendi toda a lógica sem nenhuma dificuldade cara dou seu fã parabéns de novo pelo seu trabalho.
23:15 "En este caso, la ponemos"
Yo: Eso no va a ser posible :(
aaaaajjajajajajajja
23:14 When estás con tu novia a solas en su recámara y se va la luz
Excelente video Carlos Arturo, muchas gracias por tu tiempo, esto que hiciste sigue ayudando despues de dos años, un ultimo detalle, agregue un remove para el mensaje de error ya que despues de no haber llena el formulario correctamente y de aparecer el mensaje de error si lo llenaba correctamente y lo enviaba el mensaje seguia visible en pantalla, agregando un remove se soluciono el problema, gracias nuevamente.
Que excelente tutorial!!! valió cada segundo que pase acá, muchas gracias!!!
Con "replace" en vez de "add" y "remove" te ahorrarías la mitad de código, ya que en una misma acción sustituyes una cosa por otra, en vez de eliminar la antigua(remove) y añadir la nueva(add)...
algo asi:
(tu id) ( la clase actual del elemento ) ( la clase nueva que le quieres aplicar )
document.getElementById('name').classList.replace( `${document.getElementById('name').classList}` , 'inputBoxIncorrecto' );
PD: Espero ayudarte a ti o a alguien más, un saludo buen video.
se hace de esta manera porque no estas reemplazando una clase por otra, lo que se esta haciendo es quitar y agregar una clase a un elemento, tambien podrias hacer eso con replace pero al final seria lo mismo porque tendrias que agregar dos lineas de codigo, para cada elemento. te recomiendo que veas el primer video y lo entenderas mejor.
@@reinaldocontreras3691 despues de 1 año que escribí ese comentario, apenas lo recuerdo. Pero el concepto, es el de alternar un valor (provenga de donde provenga, clase, objeto, etc) a la hora de alternar, se pueden realizar acciones "modo interruptor" osea quitarlo de un estado y pasarlo a otro, eso amigo mio es la propia descripción de sustitución, cambiar un valor o estado a algo del actual a otro y en este caso, alternarlo con replace (machaca el actual por el que le das) y quitarlo con remove, y poner el que se quita con add. En resumen, estas ejecutando dos métodos en vez de ejecutar uno.
Un saludo.
@@josecarlosperejonescobar1117 jose carlos el replace usa dos parametros el primero es la clase que deseas reemplazar, pero si la clase que deseas reemplazar no existe o no a sido asignada no la puedes reemplazar, recuerda aqui tenemos varios estados correcto verde incorrecto rojo y el estado neutral donde estan ocultos los iconos. Saludos brother
@@reinaldocontreras3691 Obviamente no se usa el replace en clases no existentes/asignadas, pero conociendo el flujo del código que además es propio, no de un tercero o de otro compañero en la empresa, das por hecho que existe y la reemplazas, es por eficiencia y limpieza, solo lo comenté para otra gente, igual que habrá gente más avanzada que te diga que eso que se repite tanto es mejor refactorizarlo...
Tuve un profesor que decía que no existen maneras correctas ni incorrectas la hora de programar, solo diferentes...
Un saludo.
Edito: @FalconMaster me encantan tus videos. Enseñas fácil y claro. Sigue así.
Diccion, volumen, claridad, vas a lo preciso, los campos del HTML los necesarios y suficiente. sin musiquita de fondo que ahoga, el encuadre de la pantalla permite una excelente visibilidad. Es el mejor tutorial que he visto.
Muchas gracias!
Realmente es una una validación profesional! Generalmente los formularios básicos validan cuando pulsas el botón 'Enviar', y lo hacen con 'IF... Else...' etc... mientras este valida al momento campo a campo.
Llegué hasta el final, que buen contenido tienes, creo que ya son pocos los vídeos tuyos que me faltan ver y en cada vídeo he aprendido algo nuevo. Muchas gracias 🙂.
te sigo ahora, primera vez que veo una explicacion tan clara y concisa, lo haces facil de entender, excelente video. Gracias
Excelente primer video, vamos por el segudo
Llegue al final, muchas gracias por el aporte, me diste muchas ideas para implementar en mis formularios
Sí pude llegar hasta el final, pero primero hice una pausa para ver tu tutorial de expresiones regulares. Explicas muy bien. Muchas gracias. Seguiré aprendiendo con tus cursos.
Muchas gracias!
Termine el video, un genio como explicas!!!! me encanto. gracias
Excelente , muy bien explicado. He visto los videos por completo y ahora necesito aplicar lo aprendido en una validación que debo hacer para un proyecto. Es muchísima información, pero es lo que necesito para aprender a programar y mejorar cada día. Gracias por compartir tu conocimiento.
Carlos Arturo eres un genio del front end, me sirvio comprarme todos tus cursos en Udemy y seguir muchos de tus tutoriales en TH-cam, super agradecido de encontrar contenido de alta calidad y en español para entender a detalle, saludos y a seguir levantando suscriptores!
Muchas gracias de verdad por el apoyo a mis videos y cursos, es un placer escuchar que sirvan.
Saludos
Cuantos proyectos tiene el curso de desarrollo web?
@@jeanpinto8864 Cerca de 5
@@FalconMasters Tambien me interesa saber cuantos proyectos tiene el curso de PHP?
@@jeanpinto8864 También como 4 o 5
Me encanto era algo que estaba buscando y de paso muy pero muy bien explicado; me quito el sombrero contigo Carlos. Felicitaciones...
nunca habia disfrutado tanto hacer una practica de desarrollo web, muchas gracias por todo ese conocimiento, seguire viendo mas practicas para mis projectos y portafolio
Muchas gracias mi hermano se te agradece desde venezuela me ayudaste mucho y eso qeu el video es de hace dos años y gracias
Muchas gracias por explicar tan detalladamente, y sí, llegue al final de tus 2 videos de estas validaciones. tienes u nuevo seguidor.
Muchas gracias! Espero que hayas aprendido mucho con estos videos.
Grande, lo seguí y me has resuelto muchas dudas Arturo!!!! Eres muy grande
Wow me quito el sombrero. Video que he visto de principio a fin y me parece genial. Gracias
mil gracias,,,, ya quedo mi formulario, de verdad, estudiar javascript se me ha echo bien pesado, es muchisima teoría y no tenia ni idea como conectar esa teoría con mi index, pero gracias a ti, ya quedo, un millón de gracias, ya no voy a tirar la toalla
Al inicio puede parecer difícil pero cuando vas aprendiendo los conceptos se vuelve muy fácil y divertido programar con javascript. Sigue adelante!
Soy nueva en esto pero me gustó muchísimo. Explicas muy bien. Te ganaste mi suscripción. Muchas gracias.
carlos Arturo mil bendiciones eres genial en primera por compartir tu conocimiento, tome tu curso de php y eres un genio, estoy haciendo lo que nunca crei gracias a que lo hiciste simple sencillo ...en verdad espero te vaya super bien y Dios te bendiga
soy estudiante y hasta ahora solo se conceptos basicos de javaScript, pero el tutorial es muy bueno y es muy facil de entender, gracias a las buenas explicaciones. Gracias por el contenido de verdad aprendi mucho bien y lo recomiendo al 100%
excelente vi los 2 videos, complete los iconos con imágenes, muy bien explicado, ahora voy a tratar de realizar que guarde todo en el local storage... gracias, sigo viendo tus videos saludos
Llege al final del video y me gusta esta validación fue excelente muchas gracias FalconMasters
Como siempre, muy buen contenido el de tu canal. De mi parte lo vi hasta el final ya que necesito aprender a validar correctamente.
Saludos desde Colombia.
Gracias mil! Nos veremos en otro de tus videos seguro!!
Excelente video.. Me gusto la forma como explica y lo comprometido que estas , con los miembro de esta comunidad que nos tramites tus conocimiento de la forma muy clara y entendible. Esperamos que sigas con las mismas actitud creando contenido y subiéndolo a la plataforma. Que eso nos ayuda a muchos de nosotros que estamos en pesando en este mudo de la programación.
Muchas gracias por compartir tus conocimientos a esta comunidad.👍
Perfect! Ha sido muy didáctico y explicado con mucho detalle. Felicidades desde Zaragoza España!
Maravilloso, muy divertido e intuitivo, Carlos. Una pasada este tutorial por completo. Muy recomendado para todo aquel que está en este bello mundo del diseño web. Muy entretenido y bastante provechoso para aprender. ¡Gracias mil! Este video y canal por completo debería tener millones de me gustas y seguidores.
muchas gracias por ambos videos, de los mas claros que vi, excelente trabajo!!!
Viejo, eres el mejor...!! Me ayudo mucho a aprender sobre agregar y quitar clases, gracias...
Muchas gracias a ti por ver todo mi, video y por las palabras, las aprecio mucho y me da gusto que te sirviera mi tutorial :D
Acabo de terminar el formulario y me ha gustado mucho, esta muy completo.
Muy valido para aplicarlo a cualquier formulario.
Me encanta tu forma de explicar de forma agil y completa.
Me gustó mucho la forma en la que conduces tus vídeos, no solamente vi este vídeo, sino los dos de esta serie. Saludos desde la blanca Mérida, Yucatán, México!
Seguí toda la serie de diseñar y validar formularios, estupendo trabajo, Carlos, eres un excelente maestro. Muchas gracias.
acabo de llegar al final del video. Te pasaste, he aprendido mucho con tus 2 videos del formulario. de hecho esto lo presentarpe para un proyecto... tengo muchas dudas con respecto a algunas lineas, pero creo que es la practica la que me hará entenderlas.!!!
muchas gracias nuevamente, eres un maestro!
demasiado bueno el video, excelenete explicacion, con tiempos correctos para entender, un aplauso!
Excelente, no me canso de tus videos. Solo un detalle, implemente el código pero al enviar el formulario, si el usuario vuelve a darle click en enviar inmediatamente después o, luego de haberlo enviado solo introduce correctamente un campo (al dar click y seleccionar autocompletar) y los demás quedan en blanco, vuelve a enviar el formulario sin volver a validar, es como que las constantes no cambian a false (lo que debería de ocurrir al ejecutar la linea formulario.reset()). Agregue: document.getElementById('formulario_mensajeError').classList.remove('formulario_mensajeError-activo') al enviar el formulario (para que desaparezca el mensaje de error una vez que el usuario haya corregido y enviado efectivamente ya que no lo hacia), pero las constantes al parecer no se restablecen, ni siquiera cuando las coloco como campos[usuario]=false dentro del if enviado. Sé que es algo viejo el video, pero ojalá tengas chance de revisar estos detalles, lo probé en Chrome, Edge, Mozilla y Safari y en todos está este error de validación. Que sigan los éxitos.
Simplemente genial Carlos Arturo, llegue hasta el final de ambos videos y aprendí muchas cosas nuevas. Muchas gracias por compartir tus conocimientos con Nosotros.
Excelente video! Tuve problemillas en el camino, pero porque partí de un formulario que ya había comenzado y me costó más adaptarlo. Muchas gracias!!
Estupendo! Me alegra mucho que te sirviera y pudieras adaptarlo a tu formulario.
Saludos!
Gracias. Carlos
Ví los 2 videos completos, en tres días
Terminé los dos videos excelente la forma de explicar y mucho conocimiento adquirido..!!
acabe con las validaciones e incluso pude validar el textArea que quería, tuve que crear toda la validación para textarea, pero al final me di cuenta que solo era necesario agregar "textarea.forEach((textarea) => " y el resto de código trabaja bien. Gracias seguiré viendo sus videos para aplicar a la web.
Muy buen video tutorial, explicaste muy bien y todo se entendio a la perfección muchas gracias por el contenido, al final solo falto que si todas las validaciones son correctas se quite el mensaje de error
Yo llegue al final del camino, me sirvio de mucha ayuda, muchas gracias nuevamente bro..
Excelentes los 2 videos, super completos, excelentemente explicado y exquisito el diseño elegido! Es perfecto para mi trabajo! Hace mucho tiempo que buscaba algo asi y superaste mis expectativas! Ahora a trabajar con todo lo aprendido! Muchisimas gracias por compartir tu conocimiento!! 👍🙌
Muchas gracias! Me alegra que te haya sido de ayuda :D
Muy bueno, asi me gustan los videos largos y de CALIDAD!
Felicidades... Esperamos mas cursos asi y algunas cosas mas Avanzadas 👍
Excelente video que se necesita para enviar el formulario después de validado, gracias
Sencillamente FABULOSO! para los que recien estamos comenzando en el mundo de la programacion este tipo de video tutoriales son lo mejor que nos puede pasar. Muchas Gracias!!
Muchas gracias a ti por este comentario. Lo aprecio mucho.
Ambos videos muy buenos, queda un poco de dolor de cabeza al recibir y analizar tanta informacion nueva. Sin dudas vale el esfuerzo, muchas gracias Carlos. Ya luego vere las expresiones regulares...
Muchísimas gracias tocayo. Yo le añadí esta línea después de formulario.reset(); 👇
document.getElementById('formulario__mensaje').classList.remove('formulario__mensaje-activo');
para que se quitara el mensaje rojo (sin recargar la página con F5) , una vez que se rellenen los campos correctos de nuevo. 😉
Muchísimas Gracias Carlos Arturo llegue hasta el final del video !! y es ESPECTACULAR!!! estoy aprendiendo mucho con tu curso de Udemy de Diseño Web Profesional: Completo, Práctico y desde cero, La VERDAD ES QUE ES GENIAL!!! Y TE VUELVO A DAR LAS GRACIAS !! PORQUE ESTOY APRENDIENDO LO QUE AMO SIN TANTOS RODEOS Y EXPLICAS MUY BIEN!!!
Muchas gracias a ti damian, me alegra que mis videos te sirvan y aprendas mucho de ellos.
Muchas gracias por apoyar mi contenido, te mando un gran saludo!
El video es excelente. Sos muy bueno explicando. Muchas gracias por el tutorial.
Alguien en 2024⁉... Ver todo ese video me dio mas potencial en validar formularios y me ayudo a que los usuarios no se burlen de mi formulario o de mi pagina web. GRACIAS. ERES UN GENIO👏
Espectacular!!! como siempre!! Muchas gracias!! Saludos desde Argentina!! Abrazo!!!
Muchas, gracias. Me funcionó mucho. Lo único que modifiqué es que usé boostrap para hacer el formulario responsive
Estoy estudiando desarrollo web, estoy acostumbrado a hacer todas las comprobaciones directamente en php y me ha ayudado muchísimo, muchísimas gracias!!
Gracias FalconMaster, por supuesto que me gusto mucho tu video. Manita arriba nuevamente 👍💪👏
Muchas gracias por estos videos!! Estoy haciendo un curso de programacion web y en un trabajo me pedian hacer un formulario con su validacion de javascript y me estaba desesperando porque no sabia como hacerlo, ahora con estos videos por fin lo tengo hecho y no solo eso, tambien he aprendido mucho de javascript y he procurado entender todo el codigo para que no solo fuese copiar y pegar :)
Te felicito nuevamente por la forma detallada y clara con que explicas cada paso de la programación. Y como comentaste al final del video, la única forma de aprender es tomarse un tiempo de descanso y volver a repetir el video para reforzar las ideas; agregando que la programación es un medio por el cual le enseñamos al computador lo que queremos que realice. Y por último, luego de aprender a escribir correctamente los códigos, viene algo que es importantísimo, que es aplicar bien la lógica de programación... ¡Qué sigan los éxitos!
Llegué hasta el final es el vídeo con el que más adquirí información acerca de validar un formulario, gracias por compartir estos vídeos
Me encanta colo explica, se entiende todo de 10 🎉
Aún después de 2 años, sigue siendo una excelente clase. Gracias
Exelente tutorial y funciona perfectamente.Gracias.estare atento para proximos tutoriales.
Muchas gracias, pude comprender y llegar hasta el final del proyecto!
Muchas gracias, estamos comprometidos con el aprendizaje
Excelente, muy buena forma de enseñar, gracias. Visto hasta el final
Muchas gracias por ver todo el video completo, espero que hayas aprendido mucho!
Excelente Carlos Arturo, muy bien explicado gracias
Un millon de gracias segui al pie de la letra tus dos videos y pude aprender muchisimo lo hice en dos dias, pero porque me tome mi tiempo para entender la logica detras de los formularios, yo se que mucha gente dice que copiando codigo de otros no se aprende pero eso es falso, yo he aprendido muchisimo con este canal un millon de gracias por tanto conocimiento.
De antemano , gracias por compartir tan valiosa información. Acabo de ver tus dos videos y realmente valio la pena. Te felicito, todo muy bien explicado.
Muchas gracias!
Excelente video y excelente la forma en que explicas. Muchas gracias y estaré siguiendo tus videos. Con tu forma de explicar termine perfectamente todo el video. Saludos desde CRC
excelente video hermano.... todo lo que sé te lo debo a ti.... muchísimas gracias por tus vídeos
Listo! Pude terminar esta práctica. Realmente fue bastante código y habían muchas cosas que ver, pero fue muy entendible y lo más importante es que logré aprender muchas cosas. Gracias por tú tiempo y dedicación en hacer este tipo de videos que son de mucha ayuda para quienes estamos empezando o reforzando nuestras habilidades~
Muy bueno tus videos, ahora veo si lo puedo aplicar a tablas!! Excelente contendio.
mijo Dios le pague por sus videos y explicaciones, me estan sirviendo ufffff demaciado! y yo siempre veo completamente sus videos, muy muy intetesado en aprender ! Gracias
soy Jhonatan Muñoz Ruiz
Muchas gracias Jhonatan, me alegra que te sirvan mis videos!
58:14 felicidades a usted por su contenido, ahora voy a aplicar esto en mis proyectos.
Muchas gracias!
Muchas gracias Falcon, pude aplicar esto para un proyecto propio, solo tuve un inconveniente cuando quise hacerlo con no se si son los mismo pasos, pero me tiraba error, igual lo resolvi de otra manera, pero me hubiera gustado aplicarlo como lo enseñaste aca
excelente video, bien explicado, llegue al final y complete el proyecto. gracias, aprendi mucho!
Muchas gracias! Me alegra que así fuera.
Excelente, impecable, pulcro! fue la primera impresión al terminar ambas partes de la creación del diseño y las validaciones de este formulario, simplemente sublime! saluditos :)
Muchas gracias, me alegra que te haya servido y espero que hayas aprendido mucho!
Muchas gracias por otro excelente video, acabo de terminarlo, saludos desde México :D!!!
Termine los dos videos completos. Muchas gracias me sirvió muchísimo.
Eso es genial! Muchas gracias por ver el video, espero que hayas aprendido mucho!
capo total ! me re ayudo para una entrega este tutorial !! ya soy fan !
hermoso video, se agradece mucho la colaboracion a la comunidad, segui asi !
Muchas gracias!
Genial! Aprendí contigo a validar formularios, y ahora que ya tenía conocimientos de funciones flecha y expresiones regulares quería actualizar mis validaciones y aprender a hacerlo mejor, y este video me ha servido para guiarme muchísimo!
Me alegra mucho escuchar eso :D
Excelente explicación de cada paso, en ninguno explican tan bien las validaciones asique felicidades y seguí creando contenido así !!
Muchas gracias!
Gracias por estos tutoriales me ayudan muchisimo, lo tengo que pausar cada 5segundos pero se entiende muy bien.