JavaScript Client-side Form Validation 2021 | Form Validation in JavaScript

hello again in this session we will see how to create user form and how to apply the validation using javascript we will be creating this user form using html and css and javascript we'll start from the scratch so we have this user form like this and when you click on the register we would like to show the error messages like this and if the value is present then we'll show the successful message like this and even you will validate the email format like you know whenever the email is like this and when you click on the register you can see email is not valid we provide the correct email it should remove the error message and it should show in the green color so let us start so i have the folder called js form validation so i open the folder using the visual studio code open folder js and js formal data and create index.html.type.html and here in each studio code you can use the some shortcuts like html and when you enter it will create the opening and closing tags for us so it will save over time and same way head then body here i want to create the form so before that i want to create one container due dot so when you want to assign some class to the div then you can write like this due dot and the class name whatever you want so i'm using class name container and press enter you can see it will create the do like this with the class and the value whatever you provided before i creating the form i just want one header so do not and class name header h2 create and then i want to create the form with class name form and currently we have action and we don't require this action just to say the form so i want to create the form control d for each of these input like user name password confirm password email new and i want to apply class name form control and close this so instead that i want to have one label and to show the label like username and a test box to receive the input for username and one small tag to show the error message or validation message so how to write the shortcut so label then i want to add one attribute here so label and when you want to add any attribute you can open this brackets and fir and you can apply the value here for user name and i want to add one more attribute called name equal to username then i want to add the input as a next element so when you want to add the next element you can add the plus and input and whereas this input i want type equal to text and then i want to add name proper username and place small tag now you can see that it has created reference label and input and small tag and let's close this like this so now username so let me write here user name same way just copy paste for the other inputs like email password confirm pass let me make type as email here we have the email type introduced in html file so name email so for password make it password and save it and we are done but before that we need to add one more from controller we need button here and called register we go and run open with live server so our form is there now the plain form and it doesn't have any css applied so it looks like this now it is time for applying the css now we have username email password and confirm password and before that i just add id also so let's say id txt user name i am using here camel case so actually usually this is the naming convention everyone follow camel case so now it's time to create the css so we explored and app.css so first write the css like for all the elements and all the classes use box sizing border box if you know the box model you can understand it very well for body and where you change some background color let's say a gb of 4 comma 4 comma 95 so just update some background color and before that we need to refer our css here so how to refer link href equal to fdr css style sheet close it so we can't see our content entirely add the display flags so we need to align this form center vertically and horizontally also justify content center align items center and we have to give some minimum height and red vh and now you can see it is center aligned margin 0. now let's write css for the container so we have container class which is the main class container and we just provide some width let's say 400 picture and we need to provide some background color border radius for pixel and overflow hidden we tried the css for this header to differentiate from the input controls and this input we just apply some background for the create user header so header background color background color applied and we need to apply some padding that's it now you can see that create user and diagram is applied for the header now it is time to write for the form we'll apply some padding picture 40 picture and after the form we have to write for the form controller so the form controller is belongs to the each row like you know each of these rows one form controller username email password and everything so you just write like ctrl and you can see that now we don't have any gap between the you know vertically like username email and password just add some gap margin bottom same way padding bottom 10 picture and position relative save it so i'll give the position relative because we need to make the channel chill elements of this form control like small absolute that's why i give the position relative here that i'll show you now now we can see that username and the test box both are coming in the same line but you need to have them in separate lines and before that we write for the form control label will write first display inline block because i want to just apply some margin to this username to so to affect the margin we need to use the display inline black and margin let's say some three pixel margin maybe bottom and now it's time to write for the text box so take this and write for the input controller instead of stuff label make it input so here i just want to apply display block so that it comes coming to the next line maybe here i can apply some 10 pixel so sorry i read a mistake okay so we just have written label as label now you can see it is applied margin bottom and let me make it 5 pixel instead of 10 pixel so display block and it should act by the enter width so 100 percentage we need some padding so let's say 10 pixel border radius four pixel read some but two pixels solid and ash see that this is very beautiful now the form we have this we small and but you don't have anything suggest my admirer message same thing you can have everywhere and now let's write some css to this error message so just cuff small position make it absolute so now we are done almost now we need to add the css for the button alone so button background color i use the same color that we applied for our background the same blue just apply here four color is not visible so color ffff padding and 20 pixel and make with 100 percentage border radius time to add the border to pixel solid and the same color finally cursor point our html and css part is completed and it is time for adding the validations using the javascript now you can see the register when you click on the register you can see it is reloading the page that will see now and before that we are seeing this error message every time so we don't want the error message by default so we can just hide it and whenever the error is there the time only we need to show this error message and the two for the particular input box here i just add visibility hidden so now you can't see that so visibility property if you use hidden what it will do it will be there in the dom and it will act with the same space but it won't be appearing on the ui so now it's time to add the javascript go to explorer and add app.js so now let's access all the textbox email and password controls so let user name equal to document.getelementbyid and here txt username so i just pass the video and write entire code so that you can save time document.queryselector and we have only one form so just form now we write the validation function validate input here i just write console.log validate input here we have the restation button and when you click on the restriction button we need to call this valid input which will evaluate the all the values and then show the error messages if required so we need to listen to the click event of this registration button so how to do that since we have only one button just i am going to write like this google query selector button and we need to add the event listener and click is the event that we are going to listen so there is the event that we are going to fire when you click on the button of course so now this is the one and even you can write of course like uh you know here you can write one click and you can call the function also anything you can use so but i prefer this way to do so you can enter button admin user click and here i am going to call validate input let's see what will happen before we running our html file we need to refer our update.js here just go before closing tag of the body and here script src f dot j now go here and right click open with the live server we have form click on the register you can see that just valid input is just coming and going see you can see the left side valid input message is coming and going because whenever you click on the register the form is submitted to prevent that behavior we can use the method called prevent default event event dot prevent default now this will stop this submitting this form so now you can see that validated input you can see and the form is not reloading now it's time to write the code check username is empty if we have username element here so username dot value dot trim so we are going to trim it and then if it is empty then we need to show the error message so to show the error messages we need to access the small element before that what you need to do let parent equal to username dot parent element this will give the parent element of the username so which means here if you go you have the username input box here for this the parent is this new form controller so the parent element method will written as this due so now we have the due element which is nothing but this parent and using the parent we can query the small tag or element so let message element equal to here now you just parent dot query selector this parent element will return the html element so html element will have this method query selector and small so now what we are telling we are telling this parent due to find out the small so this will check for the small element with available inside this div so obviously it will give this small element so now we need to make it visible because by default this small element is hidden so we have applied remember if we have applied visibility hidden so we need to make it visible message element dot we have to use the objective style object and visibility equal to visible and after that we need to set some message so we say image dot inner text equal to user name cannot be empty now let's go and click on the register you can see that username cannot be empty and if you provide some user name let's say crease and click on the register still it is showing so what you have to do we need to clear it to take again the same code we need to clear instead of visible we need to provide hidden and this text message also we can just make it if you go and click on it you can see username cannot be empty and if you go and type something click again it will go away so now we can see that we have written the same code twice so in order to avoid that you can write the another methods like helper methods or whatever function on success here i will receive the element like input and then we need message and same way we write for the error also on error so on success just copy the entire this code and paste here and same way you can see that input and message so it would take the input so instead of username keep it input and message here will say parent element message element so that's same way you take it and here on success we don't require any message so we can just make it hidden you know and make it text empty here visible and yeah that's it now instead of this code we go and just call on success and it will pass user name and here we'll pass on error and will pass username comma user name cannot be empty now go and run again you can see that error message is coming like user name cannot be empty and when you go and use some value and click it is clearing so it is working now to indicate the user name validation is successful we can add some border code to this input text box so that we can do go here from controller dot success input border 2 pixel solid and i want some green color so not exactly green i can take the some light green so let me take this something like that yeah same way we need to have some error messages and instead of green let us take the red color and now if we go and apply success for example to see how it works see this way you want to show and if we apply error this way we want to show so i will remove it here and you go to app.js so on error so we need to add this class to input control so let us add the success class to the form controller when input validation is successful so let us add the success class in success method when the wireless is successful so parent dot class list dot add and here we need to add success and same way we need to remove the error so if already validation fails then another class would have applied so we should remove it so parent dot class list dot remove error and same way in the on error but it is in reverse order like we need to add the error and remove the success now go and click on the register you can see that red color is applied and where as you can see they say mirror message user name cannot be empty and if we just apply now name crease so already we have the red border applied now when you click on the register the red button goes away means the error class will be removed from the parent class list and green color means success class will be applied to the form control same way we do for the email so if equal equal to empty then email cannot be empty else case we need to check if the format of the email is correct or not so to do that we need to use some function you know which tells whether the email is valid or not function is valid email and here we do some regular expression you can go online and check the regular expression so this regular expression will be used to validate the email so this aim is your valid email so each valid email should accept one parameter like email text let's say email and then dot test we are testing it and comparing with email so whether it is email or not now this method will check whether email is following the correct pattern or not if it is not following it will return the false otherwise it will return the true so now go here and write in the else part if is valid email and we need to pass here the email value so email dot value dot trim if email is successful so we should say here if it is not successful then set error you know like this and email is not valid and if it is successful then we should go to elspot and there we need to set success instead of username just email so now we go and check crash and email don't apply anything click on this star you can see email cannot be empty and it is highlighted with red color this email input box and now just pass just some value let's say chris and click on register you can see now image is not valid now just crease the 21 gmail.com something and click on restart now you can see that it is hydrated with the green color and because this is valid email same way password and confirm password also we can do so let's quickly copy this code pwd and same way for confirm password now you go crease creation crease.21 gmail.com and click on register you can see these two are hidden in green card but these two are actually in the red color because we are not provided any value so just apply something something and click on it now you can see that everything is green but still we need to do one more validation like whether this password and confirm password both are matching or not so that will do here in the confirm password value you know like the trim page and success so before that we need to see if password dot value dot trim not equal to confirm password dot value dot trim then else so let's go and hear return and password let's say one two three and here again give password one two three click on restart you can see now everything is green and let me give instead of one two three one something some numeric value now you can see password and confirm password not matching but if i give one to three again you can see that it will be cleared so this is how we can do the validation for the input form and you can create the form you know without any other bootstrap or something you can write your own css and you can create this beautiful form and even after clicking this register you know you can push the data to the server or you can call the service anything you can do it thank you for watching so if you like the video please subscribe to my channel

Channel: CodeWellTech

Views: 37,019

Keywords: form validation using javascript, css, Javascript advanced, advanced Javascript, learn Javascript, Javascript Tutorial, html css javascript, web development, application development, form validation in javascript, modern javascript, angular form validation, javascript form validation, javascript validation, javascript validation form html, form validation javascript, form, html, form validation, js form validation, javascript form, beginners, javascript, form validation 2021, valid

Id: YMBGvvE47I8

Length: 26min 47sec (1607 seconds)

Published: Fri Dec 18 2020