JavaScript Form Validation | How to Validate a Contact Us Form
HTML-код
- Опубликовано: 6 июн 2024
- Javascript / js form validation is an important feature to have in your websites so users know what and how to fill in forms. In this tutorial we're going to learn how to add form validation on the browser.
00:00 - Intro and Overview
03:47 - Contact Us Banner
05:54 - Name Input & Styling
10:17 - Submit Button & Styling
13:10 - Validate the Name Input (Javascript)
18:31 - Submit Form
19:30 - Thank You Message
20:50 - Additional Inputs
github.com/codyseibert/youtub...
------------
I'm a full stack web developer who has been in the industry since 2013. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!
like this video if you found it useful and would like to see more videos of the same content.
subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.
Don't forget to turn on those bell notifications!
Book mark these links!
Twitter / codylseibert
Discord / discord
GitHub github.com/codyseibert/youtube
This is my first time to see your tutorial but you explain things very well and you include best practice as well. Keep that energy and produce more tutorial.
Wow,
I am still new to front end but this tutorial is amazing! Extremely helpful 🙏
Nice voice. Vanilla JS is always the best. The info about disabling the cache while your working is freaking brilliant. I've had that problem before. It can really waste your time while debugging. Never knew this easy fix. Thanks for the learnin'. :)
under rated channel, definitely worth subscribing.
You might have just saved my exam. Thanks champ, nice project.
Thanks, for this video!
Thank you very much! You just saved me.
Thanks! Great tutorial man.
Glad it helped!
I tried your code out and it worked!.so thank you!.You should do more videos like this!
Glad it helped!
I've been learning a lot the past 4 months from your videos. I wonder if you could do some simple React projects! Hope everyone in your family is healthy or will be healthy soon! Thanks a lot for your videos they've been really helpful.
Glad you enjoy the videos. Do you have a suggestion or idea of what you want built in react? If you send me an idea of a "simple react project" I may be able to make a tutorial about it.
Hmmmm.. maybe a weather app?
really nice video.... thanks again
Increible, excelente explicacion! me fue de gran ayuda
Gracias :)
I’m glad you found it helpful!
thank you for everything
Thank you !
Obrigado, aprendi bastante.
Talking about input boxes with boxes in the background! Totally in the zone ha ha
It’s the only way to live my friend
@@WebDevCody ha ha don't doubt it.
Wow! Did you just code with your baby. Incredible works , thanks lots
hey your explaining all lines in a simple way its really understanding , and please explain more perfectly every lines , so you can be a another Brad in youtube, your voice also strong. post more good explained videos . thanks
Got any more video ideas? I’m running out of ideas lol
@@WebDevCody Please make all videos only in vanilla javascript
Please explain all programming lines perfectly, what this function do etc., each and every line perfectly....
Make the Logic to understand...
Don't run. Don't talk fast.. Lot of youtubers running like they going to miss train...
->Save images by clicking button
->Copy Text by clicking button , text field and without text field both you can make- When copy done button went to tell its copied
->Doc converter- copy, past text file in the text field and save that to .doc, .text or .pdf format in vanilla javascript
->save youtube videos by selecting format .mp4, .mkv, and 480, 1080 etc
->Advance Image editor tool , pencil, etc with save button
->Upload bulk images, after upload client can delete also , want to provide a X delete on top right so client can delete again+preview all images in full view
->upload images +crop images with save button
->upload images +resize images, reduce size+save button
->Responsive Navbar(hamburger) with Slider and text in vanilla javascript (do both in a single video navbar+ slider)
->Carousel - in vanilla javascript
->Create a full business website or portfolio in vanilla javascript
->Create a simple ecommerce website in vanilla javascript
navbar, product listing , Footer - it a very simple ecommerce site
->Moving brand logo section (every 2000 milli sec) in vanilla javascript
->create calendar- in that clients can save any notes to celebrate and if u can add time also
@@priyankakakkar4603 I think the same :)
Hey buddy you are back! Hope everything fine with your family!
Thanks! we are hanging in there!
Very useful video. However one tip for the future. Your camera window is blocking the code. I would recommend to moving it to right corner or reduce the size of it
Thanks for the feedback! I’m making an effort to hopefully not block code anymore
anyway you could add what comes after the const re = for the isValidEmail and isValidPhone?
Thanks for the source code bruv!!!!!!11
if you are sending to an email how do you have 2 onSubmits on the onClick event that takes in validation and email submission
I don't see where you included link to get the regex expression you pasted into the code.
Excellente! The problem I am having is that phone number for some reason is showing valid even when it's blank same with the comment. I want to see the continuation of a fetch request and then a request to go back to the home page.
Hi, if I want the form after submit it direct to open other link. How to do it? Thank you.
👌
Hey! this video was super helpful. Everything was working well for nameInput and stopped working after i added more inputs. i got very confused when you added 'elm'. just wondering what elm is?
So I made a helper function that I could pass the dom element which I used the variable named elm to represent.
@@WebDevCody Maybe I missed it in the video, ill go back. what was the helper function? - also thanks for getting back super quick :)
I used this code but it returns me the following error:Uncaught TypeError:
Cannot read property 'classList' of null
at resetElm (modulo-conatti.js:31)
at Array.forEach ()
at validateImputs (modulo-conatti.js:43)
at HTMLFormElement. (modulo-conatti.js:70)
I have no idea how to fix it... maybe you neither because I adapted your code to my form...
HI I want to ask what can cause error on validation for some costumers . I am in Macedonia and form works perfectly but I got report that form generates error for clients from USA? is this possible and how to fix this problem ?
I haven’t heard of anything like that before. You’d want to find what browser, version, and operating system they used
When I input the name and click submit it says name required still anyone kno wjy
baby-wearing whilst coding? RESPECT G. instant sub
haha yeah it kills my back but it's my only way to find time to make videos for you all
Hey Buddy, will be glad if you can please reply me...can u please do a video on mern stack auth? with Redux and not context ? please.....especially the frontend end auth with the jwt(redux not context api) please
I can add it to a list of video ideas if you give me a simple idea of what you want to see built. Do you just want an overview of how you setup authentication and authorization and maybe put authorization behind an endpoint?
@@WebDevCody yes please, how to actually use the jwt sent from the backend to protect routes in the frontend
Thanks alot for reaching out sir
Sir what's the condition for radio button please reply
What do you mean?
@@WebDevCody sir I can't add a function on form tag like onsubmit () function.
@@Rahul-xm1vn you should be able to do
you've used yourself video to block the code you've written
Sorry about that, next time I’ll remember to not block the code or just not use the webcam
@@WebDevCody Thanks
Make a course about additional javascript skills
Are you recording from your closet bro?
Yes lol
🤣😂
It's how a true programmer works, in the closet or the basement🤣🤣🤣🤣