Form Validation for ALL TYPES of INPUT FIELDS Beginner TO ADVANCED Level - React Js Tutorial

hello guys welcome to my YouTube channel in this previous video of the reacts form handling we see how we can handle a form in reactions and how we can create a form so this is an example that we have created in the previous video we have different types of input Fields like text select boxes the radio buttons and also the check boxes and if I submit this form we can see here we can get the all of the form data that we have inside this form so up to this we have done in the previous video and in this video we will validate all of these input fields and we'll see how we can handle different types of input Fields value with the validation so without wasting your time let's start before starting this video I wanted to give a quick recap at whatever we have done in the previous video so in the previous video we have set up on YouTube with the help of view State and we have declared one object which will store all of the input field value of our form like username value is stored in the username and also email is stored in the email so this is how I am storing all of these things and the language is actually added because the language is actually check box so checkbox need to store multiple values so it is obviously should be your ID okay and I also given some default value for all of the input Fields values so if I just remove this thing we'll see the default value will be gone and I will remove each of this thing so just removing it okay so you can see the power from is now clear and this is the on change Handler so whatever I have done that in the input Fields all of the input fields in our from I have set up on one change email Handler so this is your own change email Handler and this event handler is updating our form data so this thing it is updating our form data with the updated user Fields value like this and this is the event that is triggering I'm just console logging the event here and actually this orange Handler storing The Voice state from data is have two portions one for the languages because the language is added so the logic for storing the languages area will be different than a normal Fields like text or and or the select boxes so this is why this should be looking like complex but it is simple so if you wanted to understand this code just watch my previous video and came back to this video you will understand each and everything about this code so don't get worry about that just you don't remember that this function only updated our state okay so in this video I will validate each of the input Fields value that we have so for that I just wanted to user used it for storing the errors that we will get in our code so I will name it as from error and this will be a empty object okay so this will be empty object this will show all stored all of the from mirrors that will have and it also have something like it also required one function so I'm just declaring as validate form this will be also addo function and this function will return values like true or false so for now I am just returning the true this is a empty function on it up till now so on the on submit that you can see onshift might Handler this is actually let us on the form on submit so whenever a user submit this form with the help of this button this on submit Handler will be triggered and until now we are just console logging the form data so you can see we are just console logging the form data if I just clarify it console log that form data refresh this page and you can see the found data is console logging okay so right now it is empty and everything is working fine so what I wanted to do that I just wanted to validate is it validate or not is the all of the form input fields are validated or not so for that we need to call this validate form functions so I'm just calling this thing and this function will be eventually return some values like true or false so is valid will be a function and I'm just console logging that through console.log so don't worry I will put more code and more logic to that but simply now that understand that this is that whatever we have done okay so right now it is always providing the true I'm just changing it to false okay once okay so whatever the file related form will do that validate worm will eventually set up one erode object so just quickly Define one error object so error it should be added error object and it will check all of the input Fields one by one so if the form data dot username equals to equals to equals to empty string so it is an empty string so it is not validate so the username is not there so it will be not a valid username so in this case I will put the error as username and I will put a message error message like username required okay so this will be the code and I'm just simply leaving it like that for better understanding and in here this is the input field value of our username that you can see I'm just creating one span and inside this pen I just wanted to show the form error so it will be 4 meter Dot username okay so if the formula has the username property then only it will show that this error message okay so whatever we are putting here it will be show here and obviously I need to set the error message also so set form error as dot dot error okay so whatever error object will be there it will be eventually set up in the formula so if I save this thing and you can see the form is looking like similar but if I submit this thing you can see a message will be here this will be the error message that we have if our form is not validated okay so right now I'm just doing one thing that it is just only a username I'm also wanted to have a class name so class name like non-valid so if I save this thing in the app.css I'm just putting that non-valid it should be colored as red okay you can see the error message is looking fine and similarly like this I wanted to put all of the error messages in after all of the input Fields value so this will be for the email so formula dot email and this should be for the occupation and this should be for the gender okay so after that I'm just providing it gender and we only lived this thing so I think here I need to put here so languages okay so I put all of the divs there but I don't actually put some Logic for validate this input field so let's quickly duplicate it just write email so if the email is empty then it will show email is required and similarly if the occupation similarly the occupation if the empty the end it should be occupation required and for the gender it also will be oops gender also gender required and we have left this one field that is the languages so as language is added so languages dot length should be so languages should be less than one so I'm just wanted to at least one languages to be selected so yeah anyone language required okay so this is our all of the languages field and actually I need to change it here also so let's write email occupation oops [Music] gender and whatever we have lived is the languages okay so all of you don't misses we have declared here so save this thing rephrase this page now so right now our input Fields is empty so if I submit this thing you can see all of the fields are having the error message but there is a bug because the occupation already have the student but it is showing that occupation is required so that is because I am not providing any empty options for this purpose so for declaring any impulse first just write this value has nothing or empty string and the option like this okay so now this thing is working fine so I also submit them once again and you can say this error messaging is working really fine write some name like ABC so ABC just like abc.com so ABC ABC gmail.com and also put some occupation here so employing so if I save this thing and you can see the error message for the username email and occupation is gone only error message here is for the gender and the languages because it did not satisfy with our logic here so general steel empty string and the length of the languages array is also less than one so if I click on something like that so languages is gone and if I said the mail so gender is also gone so I wanted to do that if the form is validated we need to alert something like the form is submitted okay so actually this method that we are using also always returning the false we will change this sometimes so right now just right here like if sorry if is valued it will be true or false so if this thing is valid then it should be alert as submitted else it should alert invalid form okay so right now if I submit this thing you can see it is showing invalid form because it is invalid and now eventually it is returning the false always okay and for doing this it in the dynamic way I just wanted to show one object like object dot Keys method so object dot Keys method is returning all of the keys that we have in object and we will use this error object because ER object will put this values key value pairs in the object if there is adding error so I'm just showing that if this thing is for okay so let's like log and then put this thing here so right now just console lock this thing you can see just submit this thing it is right now what is going on okay so right now whatever it is done it is an empty edit okay so if I refresh this thing man right now it the form is containing error and you can see right now this error object your object key has some keys like username email occupation gender languages it is because right now all of these input Fields value are invalid so error object has all of the input Fields value as error Okay so we can quickly do this return dynamically written false are true dynamically by showing that if the length of this error object is less than one or not so that's mean there is no error then it should be returned true okay so this is the logic that if the all of the keys in the air error object is length is less than one that means it is a empty array then this condition will be satisfy and this return statement will return to otherwise always it should return false because always the length of the area should be minimum one or two if it the form has some error okay so just check this thing now sorry you phrase this page and submit this thing you can see after submitting the form it is showing invaded form and if I just put some values like this so this should be gmail.com occupation should be something like student it will be mail HTML at least one selected so I'm just putting HTML and you can see now it is showing the submitted it is changing dynamically we just don't hard code this return type the return type is dynamically doing with the help of the object Keys okay and also the all of the errors message is gone after we have done the submission [Music] so this is how you can validate different types of input fields in your form but some of the input phases required a step more validation than simple normal input Fields like the email or the password the email should be have at the rate and something.com or dot in if right now if I write something on simple text like this and submit this form this will show that it is validated and it's submitted but this is not actually a valid email address so for that I need to do one step more validation we need to do multiple checks for the email okay so for that if the email is not equals to the empty string then it should have some values so in the else check I will put some logic to it so if you don't know about the regular Expressions regular expressions are something of a pattern so you can see this is a regular expression pattern it starts with uh Slash and ends with a slash and inside the slash we have something encoded or some weird kind of syntax that we have you can see this is actually a regular expression for checking if the email is validate or not okay so it has some logic between that so right now I am not explaining the all of the regular Expressions now regular expressions are only used to check whether the string has the validate pattern or not so in this case our validate pattern should be with the help of in the middle we have should have one at the red and some text and then Dot and then some dot e naught.com so this should be a validate email and not this type also if the email don't have one font font text or like that if the email not have this then this should or not also consider as a value so this regular expression is taking care of all of this thing so if you want to learn more about this regular expression then comment out if you want I will make a separate video explaining all of these regular expressions in detail so right now just know that regular expression is just used to manage the pattern okay so the regular expression has some methods like test and in the text method we just need to put this ring we wanted to check against this regular expression so right now it should be the prom data dot email and this method will return one true value or false value okay so if the regular expression is satisfied with the input Fields value then it should return the true otherwise it should return false okay so for that I am just putting one explanation sign so if this test will be failed then only I need to put the error emails to some error message okay so the error message should be something like image email not validate okay so if I save this thing right now just rephrase this page submit this thing you can see the obviously everything is broken actually everything has some values here error message is showing so right now if I submit this thing you can see this is the invalid form because obviously we have don't put the email and if I type something like this I invalid email then submit this thing you can see this email field is also invalid so the form will be invalid and you can see the error message change to email not validate so early it will be not validated you should be image email not valid like this so if I submit this thing now you can see that they exchange your email not valid so right now the user should put a valid email just like this this should be considered as a valid email and you can see this form is validated and is showing the submit you can see this is how you should logic your code validation and if I have some input some password Fields also so I'm just putting some password fields so one should be password and one should be the confirm password so password this should be confirm password and this should also change or password okay so let's see where I need to change this thing this quickly open this thing to enlarge the screen so this thing is password we also declared this thing password this should be password foreign message in the confirm password because we do need that we need to change this thing to C password for confirm password actually password it should be gone from password so see password okay I think everything is fine I also need to change this form data values so I need to put two Fields like password and see passwords password and it should be C password Okay so just check this field so you can see we have the two Fields value password and confirm password so if I put this something like input like this so at the red gmail.com it should be gmail.com and also select some occupation genders and languages then somebody's form it should be submitted okay so our form is working fine this input field is also triggering the event okay so for Logic for the password I just need to check if the password and the confirm password is same or not okay so if the form data dot password okay so firstly I need to check that if the password is not empty Okay so also I need to check the formula C password is not empty [Music] then it should be either which will indicate that the password should require so password sorry it should be from from error error URL dot password this should be password is required password required okay so save this thing now if you do what is going on okay it should be error sorry it should be odd so password and confirm password should required so confirm password okay so save this thing is now if I submit this thing it should be invalid and there will be your message password and confirm password is required okay so this thing will be one case and if both have one password so they both have the user input Fields so then if they pass form dot password should equals to the form data.c password okay so if this thing is work then it should be fine or if this thing not works then the error should be here.password password not matched if I write ABC and submit this thing it also the same thing if I write ABC here also sorry it's right just write ABCD you can see it is invalid also but right now it will show the password not match so this is how you can validate or set up some Logic for validating your password you can also put some logic that if the form password length is greater than something or not so if the form data sorry it should be from data dot password dot length if the length is less than 6 then you can put some separate error message like password should be greater than 6 characters fast forward shoot foreign six characters okay so if I save this thing or sorry submit this thing now it should be password notes match if the password is matched then it should also evaluate it should be showing password should greater than secret six character so this is how you can validate your forms according to your need and also all of the input Fields value that you should need to validate we have using a simple example for that and the code is quite a messy you can also separate a switch case type of things for doing this type of checking so just do it by yourself and not only that react has lots of npm packages to validate this form but lots of the companies uses this type of pure validations of the firms so this should be remembered by everyone so every cdfgh so if I write this thing tfgh and save this thing you can see the form is now submitted and lots of the peoples commented out in my video that how should this form be used as a sign-in form or the signup form So my answer is that this form can be easily used as a sign in form of the sign of form you just need to call the server for that okay so in the sign up in the submit method that we are now just console logging the it is easy valid or not or console logging the form data so instead of doing this type of things if the form data is valid then do a HTTP call so do I API call to the server API call to server so if you put a if so if you do a API call in the server the server will validate this input Fields value and then the server will log in your user okay so this is how you can you should use this from as a law sign in from or the sign up form and I will do this type of videos that how we can do the API calls so for that video just subscribe to my channel now and also like this video so this is all for this video comments your doubt if you have any and don't forget to subscribe to my YouTube channel so see you in the next video bye

Channel: Phoenix Coder

Views: 15,471

Keywords: react form, react forms with hooks, react forms best practices, react form handling, react form validation, reactjs tutorial, react forms tutorial, react register form, react tutorial for beginners, react input validation, react inputs, how to add react form validation, react form validation best practices, react signup form, react registration form validation, react hook form validation, react signup form validation, create registration react form, react login form, debendu

Id: -IXizj0uPxY

Length: 25min 37sec (1537 seconds)

Published: Sat Oct 08 2022