JavaScript Form Validation | How to Validate a Contact Us Form

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

------------

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!

[ishimweisaac]

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.

[dai]

Wow,

I am still new to front end but this tutorial is amazing! Extremely helpful 🙏

[greendragon]

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'. :)

[vahesevachyan]

under rated channel, definitely worth subscribing.

[DungNguyen-jxlr]

I tried your code out and it worked!.so thank you!.You should do more videos like this!

[finches]

Thank you very much! You just saved me.

[solmonzon]

Increible, excelente explicacion! me fue de gran ayuda
Gracias :)

[anargyrosstylidis]

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.

[TheCodingOdyssey]

Talking about input boxes with boxes in the background! Totally in the zone ha ha

[codito]

Hey buddy you are back! Hope everything fine with your family!

[deborahakong]

Wow! Did you just code with your baby. Incredible works, thanks lots

[skunkrat]

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

[priyankakakkar]

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

[zachfenton]

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.

[karacowles]

anyway you could add what comes after the const re = for the isValidEmail and isValidPhone?

[tashalorenz]

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?

[AJPHIL-btme]

if you are sending to an email how do you have 2 onSubmits on the onClick event that takes in validation and email submission

[jeffgeter]

I don't see where you included link to get the regex expression you pasted into the code.

[madebytl]

Hi, if I want the form after submit it direct to open other link. How to do it? Thank you.

[atifahmed]

When I input the name and click submit it says name required still anyone kno wjy