How To Make Form Validation Using JavaScript | Validate Form Using JavaScript

hi guys welcome back to another video of easy tutorials youtube channel today in this video we are going to learn how to add the validation in contact form using javascript so here you can see i have created a contact form where you can see the input field for the name phone number email id and message and at the end we have the submit button if i click on the submit button you can see it is giving an error name is required and there was one more error message at the bottom called please fix error to submit first we have to fix the error which is in the name field so here we have to enter the name because right now the name field is empty so let's add anything here if i write like this still we are getting an error write full name because we have to add the first and last name so let's add a space and write full name like this now you can see a green check icon that means this input field is correct so after adding the correct data in this name input field let's click on the submit button again so it is giving error in the phone number field and here it is saying phone number is required so let's add some characters here if i write like this it is saying phone number should be 10 digits so let's add any 10 digit number here so now you can see check mark it means this input field is correct after that if i click on the submit button again it is giving an error in email field so here also we have to add the email id so let's add the email id like this so right now this is not the correct format so that's why it is saying email invalid so we have to add the email in proper email format so if i write like this now you can see a check mark let's click on the submit button again and it is giving an error 30 more characters required because we have added the limit minimum 30 characters should be there in the message box so here let's add any message you can see as i am writing the text here it is decreasing the required character right now it is saying 16 more characters required after writing minimum 30 characters in this message field we will get this check mark now we can submit this form so let's click here and you can see it will submit the form so without connecting all the fields this form will not be submitted and once we will collect all the input fields and click on submit button this form will work so we will learn how to add this validation in form using javascript but before starting this video i would like to thanks bluehost for sponsoring this video bluehost is very good website to buy domain name and web hosting if you buy a web hosting from bluehost you will get the free ssl certificate free seo tool and free cdn when you will buy web hosting for one year you will get the free domain name also in any of the web hosting plan you get the ssd storage which is very fast and you get the unmetered bandwidth it means there will be no issue with the traffic you can drive any number of traffic on your website and your website will be always up and running here you get the free ssl protection i will put the bluehost link in the video description so that you can come on this website in one click and start building your website if you don't know how to build your website with bluehost i have dedicated video on this one where you can learn how to build and publish your website in just few minutes you can find that video link also in the description now let's start this tutorial to add validation on contact form using javascript i have already created multiple tutorials about creating a contact form using html and css that's why in this video i'm not going to design this form you can go to the video description and download this html and css form and in this video we will only talk about the validation so let's come back to the folder and here you can see i have this html and css file that you can also download from the video description once you will open these files with the code editor you will see this html file where i have added the container and then we have the form tag and in this form we have added this icon and here we have added the font awesome link that's why we have added this font awesome icon then we have the input group and in this one we have the input field for the name this is for the phone number this is for the email and this one is for the text box and after that we have the button and you will get the css file also where we have added all the css for the design of the form once you will open this html file with web browser you will get this form like this next we will display the error message on this form so let's come back to the code and here you can see we have added the input field for the name so just below this input field we will add one span tag and in this span let's add one id also so i will add the id name error and in this name error let's add a error name is required like this simply we will add the span tag in all the input group just below the input field so here also we will add the span tag and this is for the phone number so we will add the id phone error and here also one message phone is required let's copy this one and add it just after this input field for the email here we will add the id email error and we will add the message email is required and after that we will add one span here this is for the message error message is required like this and we will add one message after this submit button also so here also we will add a span and we will add the id submit error and one message please fix error so we have added these error message in this html file and let's refresh our website and now you can see these message here at the end of all the input fields and one error message at the bottom left corner of this form so we have to change the position and color for these error message for that we will come back to the html file and here you can see we have the class name called input group and in this input group we have the span tag where we have added the error message so let's add this class name in the css file and here we will add the span and for this span we have to set the position position will be absolute then we will add the bottom bottom will be 12 pixel and right 17 pixel we will add the font size it will be 14 pixel and color so the color will be red because it's an error so you can see the position has been changed for these error message we have to add the css for this one also which is for the submit error let's come back and here you can see we have added the id called submit error so let's copy this id write it here with the hashtag because it is an id and here we will add color red that's it so this message is also in the red color so we have added the position and color for the error message but right now this message is displaying by default but we have to display this message after validation using javascript so we will remove these error messages for now and it will be displayed later let's come back and come to the html file and just remove this message span tag will be there we have to remove the message only let's remove all the error message like this it's done again you can see this simple contact form now we have to add the javascript file so here we will create a new file go to files new file and save this file as script.js make sure the file name should be js so we have created a new file and next we have to come to the html file and just at the bottom before this closing body tag we will add a script script open and closing tag write src and write the file name that we have just created which is script.js so it will connect the javascript file with the html file next we have to add the variable for all these id that we have written here in this html file so let's come to the script file this is the script.js and here we will create variable so let's add where name error equal to document dot get element by id and in this id we will add the id that we have added in the html file so you can see we have added the id called name error just copy this one and place it here so this is the first variable just duplicate this one and change the name it will be phone error this is for the email error this is message error and this one for the submit error and here also we will change the id so we have added these variables next we have to add the function that will validate the input works so let's come back to the html file and here we have the input field for the name in this one we will add one id so let's add one id called contact name and we will add one event so it is on key up on key up equal to and here we will add one function name so let's add any function name validate name like this so here we have added one id and one function next we have to define this function that we have added here so just copy this function and come to the script file here we will add function write the function name like this so this function will be executed whenever we will start typing anything in the input field so here we will add one variable and write name equal to document dot get element y id and in this idp we will add the id that we have just created which is contact name copy this one add it here at the end we will add dot value so this variable called name will store the content written in the input box which is for the name so it will take the value of the input field and now we will add the condition so here we will add if name dot this will check whether this name length is 0 it means the input field is empty so it will display an error called name is required and where this error message will be displayed it will be displayed in the variable called name error and this name error is for the id called name error that we have added here in this span tag so in this span tag we will see this message called name is required when the length is 0 it means the input box is empty next we will add the another condition here we are adding this condition so this expression is exactly checking the first character should be alphabet and after that there will be one space and after that it could be any character a to z here we are adding exclamation it means value is not matching with this expression then it will give an error so what will be the error just copy this one paste it here and here we will add write full name like this and one more thing once it will give an error it will return false like this and we will add this return false in this if condition also so whenever there will be an error it will return false in this condition also if it will give an error it will return false if there is no error then what will happen it will display a success message so let's add name error dot inner html equal to and in this one let's add valid like this suppose there is no error then it will say valid and then it will return true like this it is not and it will be a dollar sign like this so again refresh the website and you can see if i write a first name and write anything in the second name it will say valid you can see the message has been changed to valid so instead of valid we want to display a check sign so you can see in the html file we have added this font awesome link so we can add the font or some icons so let's come to the font awesome website here we will search for one icon so let's go to the icon and search for check we'll click on this one check circle copy this and come back to the script file and in this script instead of this valid we will add this html code like this and we will change the color also so it is in the i tag you can see it is in the i tag so we have to use this i tag in this css file just come to the css and copy this input group span and in the suspend we have the i tag for the icon and here we will add the color so let's add the color of this one after adding this color come to the webpage and here we will add one name now you can see a green color of check sign so it is working fine next we will add the validation for the phone number field so let's come back again come to the html file and as you can see we have added the id in the name field and one function so same thing we will do in the phone number field so just copy it here so this is for the phone number field so it will be contact phone id is contact phone and here we will add validate phone like this come to the script file and let's copy this one paste it here instead of validate name we will add validate phone this is for the phone number validation and again we have to add the variable so let me just copy this one only paste it here it will be phone equal to document.getelementbyid contact phone id is contact phone so this phone will store the value written in the phone number input field next we have to add the condition to check the phone number so here let me write the condition then i will explain to you so you can see here we have added phone dot length equal to zero so it will check whether the phone number field is empty then it will display an error phone number is required next it will check the length of the phone number if it is not equal to 10 then it will display an error phone number should be 10 digits in this condition it is checking the phone number should be 0 to 9 and for 10 characters and if it is not like that then it will display an error called only digits and if there is no error like this then it will display a check icon and it will return true so after adding this let's check the phone number field come back to the web page and here if i write you can see phone number should be 10 digits so let's add more digits and now you can see a check icon you can see if i add any character like this z y anything it is saying only digits please so we need to add digits and if we add 10 digits it is fine so this phone number validation is also working now let's come back and we will add the validation in this email field so let me just copy this one and paste it here in this email input field write the id contact email and this is validate email next we will add the script so let's copy this one it will be validate email then copy this paste it here it will be email document.getelementbyid contact email so it will store the value written in the email input field and now we will check the conditions you so in this validate email function we are adding this variable that will get the value of the input box and then it will check the length if it is 0 it means it is empty so it will display an error email is required and return false next if there is some value then it will check this condition and here it is saying it should be any alphabet it may contain a dot or underscore or this hyphen and it can also contain any number and after that there should be one at the rate after at the rate there will be some alpha bits and then one dot and after that dot there will be another alphabet it could be two three or four characters so if the email format is not matching with this one then it will display an error called email invalid and return false and if there is no such error then it will display the check icon and return true here we will remove this and save this file let's refresh the website again and if i write correct email here now you can see it is displaying a check icon it means the email id is valid next we have to add the validation for the message box let's come back and here we will add one id and one function copy and paste it here write the id called contact message and this is validate message now let's come back to the script file and copy this one here we will add validate message and in this one again we will add one variable so it will store the value written in the message box and after that we will add one variable where we will add any number required equal to so if we want 30 characters then we will add 30 characters is required and here let's add another variable and it is left left equal to required minus message dot length so it will give the value how much characters is left and now we will add the condition if left greater than 0 it will be giving an error message message error dot inner html and then it will return false and if there is no such error and the character is more than 30 then it will display a check sign just copy this one paste it here and here we will add message error dot in html that's it here it will be this one message refresh the website and now you can see if i write something 29 more characters required if i delete this one it will display 30 more characters required and if we write some text here and now you can see the error message has gone and we will get the check icon so this message box validation is also working fine next we have to add the validation when we will click the submit button so let's come back in this button we will add on click and here let's add return space and one function validate form next we have to define this function called validate form in the javascript so let's copy this one come back to the javascript file and here we will add a function validate form and in this one first it will check all the functions that we have added in the different input field so here we will add if exclamation validate name then we will add exclamation validate phone in the series wise we are adding so this condition will check if any of these are false then it will display an error message so here we will add submit error dot inner html and one message like this and after that it will also return false after adding this again refresh the website and simply click on the submit button and you can see here it is displaying place fix error to submit sob submit but right now this error message will be displayed continuously so we have to hide this message after few seconds so let's come back and here we will add submit error dot style dot display it will be block so it will be visible and here we will add set timeout display none so after three second it will hide the error message which is please fix error to submit so this message will be displayed for three second and after three second it will be hidden because we are adding display none in the set timeout and it will return false so it will not submit the form so let's check this one and if i click here you can see this message will be hidden after some time you can see this message is hidden so this complete form is working fine right now let me check all these input field and if i write a name here then we will add one phone number and any email id and message after connecting all the input field if i click on submit it will submit the form successfully without any error message so it is working fine so we have completed this form validation using javascript i hope this video will be helpful for you if you have any question you can ask me in the comment section please like and share this video and also subscribe my channel easy tutorials to watch more videos like this one thank you so much for watching this video

Channel: GreatStack

Views: 114,800

Keywords: Form Validation JavaScript, JavaScript Form Validation, Form Validation, Phone Validation, Email Validation, Email Validation JavaScript, Name Validation JavaScript, Validate Form Using JavaScript, Validate Email id, Validate Phone number, Web Development, JavaScript

Id: fz8bwvn9lA4

Length: 33min 11sec (1991 seconds)

Published: Tue Feb 08 2022