Validación de Formulario con JavaScript paso a paso - JavaForm Validation
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- Aprende a crear un formulario de validación con JavaScript, en este tutorial te explicamos paso a paso como puedes utilizar JavaScript para validar los datos de un formulario.
#tutorial #javascript #form
Accede al código fuente: codepen.io/gro...
🔥 Suscríbete: bit.ly/3fDieE6
⭐ Aprende con nuestros cursos: codigoonclick....
👨💼 Únete a nuestro grupo de Programadores en Telegram: t.me/Aprendien...
👨💻 Nuestro Setup: • Mi Home Studio SETUP T...
===== El mejor servicio de Hosting para tu web 60% OFF =====
Accede: codigoonclick....
===== Rutas de aprendizajes y cursos que recomiendo =====
💻 React.js: bit.ly/React-C...
💻 PHP y Laravel: bit.ly/2INbE1R
💻 React Native: bit.ly/cursos-...
💻 Cursos GRATIS: bit.ly/3u4Uvmz
💻 Cursos en iToo.dev: bit.ly/iToo-Cursos
🌎 VPN que recomiendo: bit.ly/3t8P98u
Tutorial basado en el video original de este tutorial en inglés: • JavaScript Client-side...
===== SÍGUENOS AQUÍ =====
🐦Twitter: / grovervas
🙋♂️ Facebook: / programandocongrover
📷 Instagram: / grovervas
programando con grover,programacion,javascript,tutorial,js,form validation,validacion formulario,js form,javascript form validation,coding,programming,javascript validation,javascript validar formulario,javascript validacion,javascritp tutorial,code,front end,css,javascript client,javascript form,javascript formulario,validar formulario,javascript form tutorial,form tutorial,formulario de validación javascript,validacion de formulario con javascript
MIRA ESTE VIDEO DONDE INICIAMOS UN CURSO DE React.js 👉 th-cam.com/video/T-kNBQNzZgA/w-d-xo.html
Ayúdanos que el tutorial se posicione, lleguemos a 100 Likes ♥️👍
No olvides suscribirte 👉 th-cam.com/channels/EJjaxu4a10STsi9HPGyItA.html
Gracias a este video logre salime de un apuro, mil graciass
Excelente mano, tengo tiempo pidiendo este tipo de cosas, please haz uno de como mandar datos a una base de datos y de ahi a un email con apis y nodejs es que de verdad quisiera aprender eso porque no se crear apis y esas cosas xD
muchas gracias , gran tutorial
Grande bro, me sirvió mucho tu tutorial
hola pero este formulario no permite hacer redireccion incluso cuando los campos están correctos como sesupone que puedo hacer eso?? o no se hace de esa manera?
No logro entneder por que pones .clase.otra clase osea dos clases juntas si solo puedes poner una
y para insertar el registro en una Base de Datos tendrán un video ? junto con estás validaciones ?
Hola el tutorial esta muy bien, pero la músico de fondo un poco alta, Gracias👍👍👍👍
Muy buen vídeo, muy útil.👍👍
La música está demasiado alta y distrae al alumno.
Gracias por tu recomendación, lo tendremos en cuenta.
tambien podrian usar la estructura del swich para validar con case , para que no haya muchos if , else
Claro Andres, excelente aporte.
Muy buen tutorial! Muchas gracias. Me ha servido mucho para lo que necesitaba. Tengo una inquietud. He tratado de programarle el message de forma que aparezca un mensaje también cuando la entrada es correcta, pero no me ha funcionado. Básicamente lo que he adicionado es lo siguiente al método setSuccessFor:
function setSuccessFor(input,message){
const formControl=input.parentElement;
const small=formControl.querySelector('small');
formControl.className='form-control success';
small.innerText=message;
}
Y en la condición le adicioné el parámetro del mensaje. Gracias por su atención. Slds.
Incluso adicioné en el HTML otra etiqueta , así:
Usuario
Success message
Error message
Submit
Un detalle, en el programa original no aparecen el circulo o exclamación . Es decir; pareciera que la la funcionalidad del fontawesome (fas fa-check-circle y fas fa-exclamation-circle) no se evidencian. A mi me está funcionando solamente el fas fa-exclamation-circle. Gracias por sus sugerencias. Slds.
Buen vídeo, muy útil... Recomiendo que pongas los créditos de Florin Pop por lo menos. Saludos
Si esta considerado en la descripción del video la fuente original. Saludos.
puedes ayudarme como se utiliza en un formulario de edicion ya que no funciona correctamente.
oye a mi me salío bien, solo que cuando todo este bien no puedo enviar el formulario a que se debe
Pues la verdad a mi se me hizo muy bueno el video aunque se escucha de fondo "huele a chango" 😂 y no se porque hay gente que se queja por cosas tan X. Sí no entendiste el CSS entonces creo que vas por la ruta incorrecta, porque lo que hizo no es cosa del otro mundo. Sí algo no funcionó investiga un poco más, digo ya te sirvieron la mesa solo tienes que ir por los cubiertos.
Saludos Profesor lo sigo desde Udemy.
Y cómo hacer que enlace a sus respectivas páginas como pasa en hotmail, estafeta...
Cual es la biblioteca de cloudfire? Alguien tiene el link
Cuando intento validar me bota el siguiente error.
main.js:15 Uncaught TypeError: Cannot read property 'trim' of null
at checkInputs (main.js:15)
at HTMLFormElement. (main.js:11)
he revisado varias veces y aparentemente todo está como explicaste en el tuturial, podrías ayudarme a identificar el error y la posible solución?.
Hola, es un poco difícil poder apoyarte sin ver tu código, pero revisa en este enlace: codepen.io/grovervast/pen/PoPOYdX, el código del tutorial, y compara con el tuyo seguro algo debe faltar por ahí.
bro tengo un problema al ejecutar el codigo no me aparece los "fas fa-exclamation-circle" crei que era mio pero al parecer que ahora lo copio del codigo fuente igual me puedes ayudar con eso?
y como le podria agregar una funcion para que me mande de paso en pasos, por decir estoy en el orimer paso pero no eh rellenado los campos y no me permite pasar al segundo y asi sucesivamente. Crees poderme ayudar?
Mi pregunta es esta y puede ser media boluda y a la vez ignorante pero lo siento, uno podria cambiar internamente las validaciones desde el inspeccionar codigo, onda manipular las validaciones a tu propio beneficio y cuando toques enviar. Se envie....
La etiqueta small de donde salio ??? es nuevo estandar html ??
Puede revisar info de la etiqueta www.htmlquick.com/es/reference/tags/small.html
y cómo envío el formulario una vez ingresados los datos correctamente ?? al utilizar preventDefault () el evento se cancela y ya no se puede reanudar el evento, ya intenté con el objeto "location. href" pero nada, y intenté también con el método "submit()" al propio formulario para que se envíe si todo está correcto y tampoco ..... no he encontrado un video donde lo explique ......
debes guardar el formulario en una variable asi : const form = document.getElementById('formulario'); y luego hacerle submit form.submit(); el .submit() es al formulario no al evento, espero haberte ayudado si no me dices
@@alonsoreyes7879 Me puede explicar no puedo enviar el formulario gracias
@@MrRatoncito92 Que código tienes de momento
@@alonsoreyes7879Como enviar el formulario después de validado en js esa parte no me funciona con la explicación de arriba, de resto me funciona muy bien, pero quiero enviarlo.
@@MrRatoncito92 Primero guardas el formulario obtenido por ID en una constante o variable, después ya que haya pasado todas las validaciones , mandas a llamar si método submit con formulario.submit(); o el nombre de variable que le hayas puesto
Cual es el link de esa Librería Grover?
Puedes ver el ejemplo desarrollado en esta dirección: codepen.io/grovervast/pen/PoPOYdX
me sale este error Uncaught TypeError: Cannot read property 'addEventListener' of null
error de Sintaxys
seria muy complicado si al momento de que el usuario ingrese un valor en la caja de los input enseguida quitar el error de validación sin necesidad de dar todo el tiempo click en el botón de enviar ??? hubiera sido mejor
solo tienes que usar otro evento distinto del click, para que sea mas en "tiempo real", podrias usar keyup event. Saludos
Hola a todos, me gustaria saber como puedo hacer envio de formulario de contacto con javascript yo estoy nuevo en estoy y no he conseguido forma de lograrlo muchas gracias por su ayuda
Pues con JS no lo vas a lograr por que es un lenguaje del lado del cliente, normalmente se usa PHP y hay un monton de tutoriales en youtube.
Si te soy sincero el resultado es muy bueno pero la explicación muy mala. Tienes que entender que quien ve estos videos es beginner y no lo explicas bien, vas muy rápido, pones la música cuando haces css, de donde sale, porque se hace una cosa, porque se hace otra. Mi opinión es que si quieres enseñar, vas por el camino incorrecto.
Ignacio Herráez gracias tomaremos en cuenta tu recomendación, el tutorial es sobre JS y por eso aceleramos el video en la parte de CSS.
Pero recuerda que en la descripción tienes el enlace al código fuente para un apoyo adicional.
Gracias por el video, solo una recomendación, es horrible tener una música de fondo, para las intros está bien, pero todo el video es un martirio..
La canción de fondo "olor a chango"
No entiendo por qué no vas al grano de inmediato
Por lo menos dale crédito al autor original
Quién es el autor original?
pone el codigo wn flojo
No funciona 🤣🤣🤣
Por 2
x3