Validación de Formulario con JavaScript paso a paso - JavaForm Validation

Поделиться
HTML-код
  • Опубликовано: 5 ноя 2024

Комментарии • 58

  • @grovertec
    @grovertec  3 года назад +1

    MIRA ESTE VIDEO DONDE INICIAMOS UN CURSO DE React.js 👉 ruclips.net/video/T-kNBQNzZgA/видео.html

  • @jesusgregoriosola5871
    @jesusgregoriosola5871 3 дня назад +1

    Estimado profesor el vídeo es de lo mejorcito que han visto mis ojos en varios años. En cuanto al paso que vas explicando es el correcto, ya que no se puede entrar en un vídeo de estos sin saber nada de nada. Estos trabajos son para consolidar información sobre conocimientos, en modo alguno para tomar clases de curso. Gracias y saludos por su trabajo

  • @luisenrique2329
    @luisenrique2329 Год назад +1

    y para insertar el registro en una Base de Datos tendrán un video ? junto con estás validaciones ?

  • @grovertec
    @grovertec  4 года назад +1

    Ayúdanos que el tutorial se posicione, lleguemos a 100 Likes ♥️👍
    No olvides suscribirte 👉 ruclips.net/channel/UCEJjaxu4a10STsi9HPGyItA

  • @lizvaleriano5046
    @lizvaleriano5046 4 года назад +1

    Gracias a este video logre salime de un apuro, mil graciass

  • @raptoverdad
    @raptoverdad 2 года назад +1

    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?

  • @darvinrodriguez5577
    @darvinrodriguez5577 4 года назад +6

    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

  • @CarlosGutierrez-vq4ru
    @CarlosGutierrez-vq4ru 2 года назад +1

    muchas gracias , gran tutorial

  • @jesusesparzaserna8570
    @jesusesparzaserna8570 3 года назад +2

    Grande bro, me sirvió mucho tu tutorial

  • @carlosmelian2057
    @carlosmelian2057 Год назад +1

    Hola el tutorial esta muy bien, pero la músico de fondo un poco alta, Gracias👍👍👍👍

  • @andresrosales4792
    @andresrosales4792 2 года назад +2

    tambien podrian usar la estructura del swich para validar con case , para que no haya muchos if , else

    • @grovertec
      @grovertec  2 года назад

      Claro Andres, excelente aporte.

  • @loanyelo15
    @loanyelo15 2 года назад

    Y cómo hacer que enlace a sus respectivas páginas como pasa en hotmail, estafeta...

  • @oscareliceballosavila9860
    @oscareliceballosavila9860 2 года назад

    puedes ayudarme como se utiliza en un formulario de edicion ya que no funciona correctamente.

  • @elsavictoriabarraganoliver7153
    @elsavictoriabarraganoliver7153 4 года назад +1

    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.

    • @elsavictoriabarraganoliver7153
      @elsavictoriabarraganoliver7153 4 года назад

      Incluso adicioné en el HTML otra etiqueta , así:

      Usuario


      Success message

      Error message

      Submit

    • @elsavictoriabarraganoliver7153
      @elsavictoriabarraganoliver7153 4 года назад

      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.

  • @evanc3441
    @evanc3441 10 месяцев назад +1

    No logro entneder por que pones .clase.otra clase osea dos clases juntas si solo puedes poner una

  • @santiagop.b6804
    @santiagop.b6804 Год назад

    Cual es la biblioteca de cloudfire? Alguien tiene el link

  • @hellg1307
    @hellg1307 3 года назад +2

    Muy buen vídeo, muy útil.👍👍
    La música está demasiado alta y distrae al alumno.

    • @grovertec
      @grovertec  3 года назад

      Gracias por tu recomendación, lo tendremos en cuenta.

  • @rgp-hades6515
    @rgp-hades6515 3 года назад

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

  • @lazaroborghi6821
    @lazaroborghi6821 3 года назад +1

    Buen vídeo, muy útil... Recomiendo que pongas los créditos de Florin Pop por lo menos. Saludos

    • @grovertec
      @grovertec  3 года назад +1

      Si esta considerado en la descripción del video la fuente original. Saludos.

  • @carlosgarciatn2738
    @carlosgarciatn2738 4 года назад +1

    La etiqueta small de donde salio ??? es nuevo estandar html ??

    • @grovertec
      @grovertec  4 года назад

      Puede revisar info de la etiqueta www.htmlquick.com/es/reference/tags/small.html

  • @norlinsorto3685
    @norlinsorto3685 4 года назад +1

    Cual es el link de esa Librería Grover?

    • @grovertec
      @grovertec  4 года назад

      Puedes ver el ejemplo desarrollado en esta dirección: codepen.io/grovervast/pen/PoPOYdX

  • @nachitoespinoza2163
    @nachitoespinoza2163 4 года назад

    oye a mi me salío bien, solo que cuando todo este bien no puedo enviar el formulario a que se debe

  • @leopoldvermilion9961
    @leopoldvermilion9961 Год назад

    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?

  • @yahircruzzapata9994
    @yahircruzzapata9994 4 года назад

    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?

  • @javiermoraes97
    @javiermoraes97 3 года назад

    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

    • @DavidHernandez-sw6sj
      @DavidHernandez-sw6sj 3 года назад

      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.

  • @arnulfomarin9764
    @arnulfomarin9764 4 года назад +1

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

    • @grovertec
      @grovertec  4 года назад +2

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

  • @DavidHernandez-sw6sj
    @DavidHernandez-sw6sj 3 года назад +1

    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.

  • @adriancordova1618
    @adriancordova1618 4 года назад +1

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

    • @alonsoreyes7879
      @alonsoreyes7879 4 года назад

      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

    • @MrRatoncito92
      @MrRatoncito92 4 года назад

      @@alonsoreyes7879 Me puede explicar no puedo enviar el formulario gracias

    • @alonsoreyes7879
      @alonsoreyes7879 4 года назад

      @@MrRatoncito92 Que código tienes de momento

    • @MrRatoncito92
      @MrRatoncito92 4 года назад

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

    • @alonsoreyes7879
      @alonsoreyes7879 4 года назад

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

  • @colommbiano
    @colommbiano 3 года назад

    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

    • @luisloyola3591
      @luisloyola3591 2 года назад

      solo tienes que usar otro evento distinto del click, para que sea mas en "tiempo real", podrias usar keyup event. Saludos

  • @danielagamez8904
    @danielagamez8904 4 года назад

    me sale este error Uncaught TypeError: Cannot read property 'addEventListener' of null

  • @AlejandroSaezM
    @AlejandroSaezM 3 года назад

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

  • @djxete1987
    @djxete1987 4 года назад +3

    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.

    • @grovertec
      @grovertec  4 года назад +3

      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.

    • @grovertec
      @grovertec  4 года назад +2

      Pero recuerda que en la descripción tienes el enlace al código fuente para un apoyo adicional.

  • @omardeblashernandez4927
    @omardeblashernandez4927 3 года назад

    La canción de fondo "olor a chango"

  • @josepena-bk8wd
    @josepena-bk8wd 2 года назад

    No entiendo por qué no vas al grano de inmediato

  • @katteos
    @katteos 4 года назад

    Por lo menos dale crédito al autor original

  • @flowtiano
    @flowtiano Год назад

    pone el codigo wn flojo

  • @gustavosolar1541
    @gustavosolar1541 4 года назад +1

    No funciona 🤣🤣🤣