Contact Us Form Validation Using Javascript | Form Validation In Javascript

Form Validation -- Check out Form Validation Using Javascript

#FormValidation #FormValidationUsingJavascript #HTMLFormValidation

--------------------------- Demo Files ---------------------------
Download the Exercise Files here,

Codepen Link,

--------------------------- FOLLOW ME ---------------------------

--------------------------- CDN LINKS ---------------------------
Google Fonts Link,

--------------------------- Donate ---------------------------
Support my channel by Donating

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

If you like this video, please subscribe to my channel.
Thank you

[abdishakur]

Thanks my brother currently working on a registration form for my training, thanks for sharing this practical example

[selvaananthi.s]

1st time visit your chanel...this video is useful

[senju]

If anyone had the issue that after a successful form submit that the red error box appears at the top of the form, the solution is the following:

if(name.length < 5){
error_message.style.padding = "10px";
text = "Please Enter valid Name";
error_message.innerHTML = text;
return false;
}

Specifically it's this line:

error_message.style.padding = "10px";

Why?

If none of the conditions in the if statements are met or true, then the form will submit successfully but the issue is that with the location of that line as shown in the video or the Github files (error_message.style.padding = "10px";) creates the outcome where it will always display the red box unless you remove it and place it inside each if statement so its restricted specifically to each if statement.

Entire code snippet:

if(name.length < 5){
error_message.style.padding = "10px";
text = "Please Enter valid Name";
error_message.innerHTML = text;
return false;
}
if(subject.length < 10){
error_message.style.padding = "10px";
text = "Please Enter Correct Subject";
error_message.innerHTML = text;
return false;
}
if(isNaN(phone) || phone.length != 10){
error_message.style.padding = "10px";
text = "Please Enter valid Phone Number";
error_message.innerHTML = text;
return false;
}
if(email.indexOf("@") == -1 || email.length < 6){
error_message.style.padding = "10px";
text = "Please Enter valid Email";
error_message.innerHTML = text;
return false;
}
if(message.length <= 140){
error_message.style.padding = "10px";
text = "Please Enter More Than 140 Characters";
error_message.innerHTML = text;
return false;
}

[borsho]

Is nice, but the last part if you put just required inside the labels on input or type="email" you actually shorter the job a lot.

[thetpainghmue]

all I want to know is here . thank you so much bro. Good Job

[shubhamarora]

Thanks great explanation👍 make more tutorials like this with explanation that is more helpful for us please make ur all future videos with explanation not using background music. Can u please also make ur tutorials in hindi.

[BettysEmbroidey]

Thank you for this awesome tutorial....

[iamded.]

Great vid, thanks. Wish there were more validations shown, and multiple validations for one field. I'm terrible at coding and as soon as I try to go off-book things go wrong so I need step by step help hahah.

[nethrakashyap]

My validation function is not working!????

[sultanrasul]

Thanks dude your validations helped me!

[Ibrahim-fhkv]

BRO CAN YOU SLOW DOWN A BIT AND THE TUTORIALS IS GREAT, KEEP UP THE GOOD WORK:>

[leodragonheart]

Dude ur amazing !! thanks for this video. I was completely lost lol

[el]

at 20:47, how would I turn the phone validation into a regex expression? Instead of just using phone.length !=10

[smitanikam]

Hello sir... Email function and message function didn't working in js file. Plz tell mi solution

[amittangale]

i want validation message foe each input seperately not one diaply for all input

[TafaNoori]

Can you also make a tutorial on what happens next, I mean how to submit the form the way that it sends to an email

[Bharatsankar]

What if i did not enter any correct data.. then what message will show for what?

[osmanomer]

The form was created successfully, but where was it submitted?

[SunilChris]

Pls let us know where did the form was submitted since no email address was entered anywhere to direct the form to be submitted. Kindly explain

[ahmedsabbir]

After submitting, my form is not clearing. What should I do?