How to Create and Validate Ant Design Forms | Antd Form Validation | React Js

hello guys welcome back in this video we will discuss another important topic from and design we will discuss and design form validation we will see how we can add different components in and design form and how we can add a validation on those fields right so let's do a quick demo of that so right now we have a register form so it is uh it has different type of fields file like the input fields the password related fields the email and then the drop down then a date picker then a website url field and then add a checkbox for the agriculture of the conditions right so we have added different type of rules or validations on these type of fields so right now it is saying that we should enter a name and it cannot be empty and it should have at least three characters so let me add a name right and then in the email it is saying that right now it is not a valid email and if you enter at the gmail.com uh it will accept it right so then the password is required and it we have added a uh proper criteria that it should have up these type of letters so that it is considered a proper web password right and also the password and confirm password should be should be equal so if i enter any password uh if if that does not match it will say that two password doesn't match so let's add a password that matches right here you go if the matches it is good and even if i update this password again it will still uh validate that does not match and if i update to both matches so this this field is optional so whether i select it or make it empty uh remain empty in the start that's okay and date of birth and then website although it's optional but if it is added it should be valid uh you are right so this type of uh validation we will be adding in this video right and also we will unless we have accepted uh the term recognitions we will not be able to register right so this is this is what we will be developing in this video so let's get started i have an empty react.js project that is using and design so let's go ahead and import the form component from the end design and also the other components that we will be using for implementing the form so those will be button to show the submit button and then the check box that will be using for the agreement selection and then there will be a date picker that will be using for the date of databot selection and then input that will be used for the full name email password and confirm password fields and then the select component that will be used for the general selection so let's use the form here and add the form item uh the first form item that we are going to add is uh is for the full name so that have a name of full name and with the label of a full space name right let's save it here you go full name and let's add a maybe placeholder as well so we can say that type your name right let's copy it and add a few other fields so this was the full name let's add this for the email and then for the password and for the confirm password so it will be email and its label will be email type your email and then the password the label could be password type your password and then the confirm password field and label we can say confirm password and here we can say confirm your password right let's save it and see how it looks like okay so email and then the password so here you see the password is uh the text is shown so let's make it uh that it is showing a static instead of the password static or dots so it will be input that password so that's the feed that will be using here you go now it's showing thoughts and if you click on this i icon it will show and then height right both fields right so [Music] next let's add a field for the gender selection so it will be gender gender and you can say select your gender and it will be select component and let's add few options in that the first option could be select option mail and with the value of mail and then the second option could be female and female okay save it here you go circular gender and male and female right let's add another field for date of birth selection so that will be a date picker date of birth you can say labeled date of birth and here we can see say choose date of birth and instead of input or password it will be a date picker and with the picker type of date here you go choose a date and it is a date picker right and then let's add another field for for the website and with the label of website add your website link or url and it will be a simple input field here you go and then let's add agreement checkbox and for that let's skip the label because label does not make sense for that let's add a checkbox and in the checkbox we can say agree to our you can see any a tag terms and conditions and for the href let's set uh hash for now and of course in reality it will be a public url and in the last [Music] that will be uh the submit button okay okay so button will be uh for the register and its type will be primary and its html type will be submit so that when it is this button is clicked the form is submitted save it here you go the ui so let's make it a little pretty let's add few let's move the label and website from here it is not needed okay so let's add a few alignment so for the label column let's span it to maybe it no it is cutting let's make it 10 okay all of the levels looks good and for the shepherd column uh what is left is span 40 right here you go and for this field date picker that let's add a custom style and set its width to 100 percent okay looks good what else let's make this full width yeah agreement and then this one so it will be a wrapper column span to 24 here you go let's copy and add this the same for the this register button and make it block so that it occupies the whole space here you go so this is the ui and now if i press this just a button doing nothing it is not validating any of the things any of the field so suppose the full name is required email is required and also email should be look like a email the website should look like any uh website url and things like that like that also the password and confirm password should match so let's add all of these validations let's start from the full name and here let's add the rules so those will be the first rule will be it is uh required field right i know as soon as i added a rule that required true it is added a small static here and also if i not press on the register button it will say that this full name is required this full name is it is getting from this name also we can customize that and pass the message when this rule is executed the message should be please enter your name maybe right so now if i click on register it will say please enter your name right so also we will be uh typing here and uh it it should not autofill the the fields let's add a prop here auto complete to be off so that it does not uh clutter while we are typing here otherwise it will show up drop down list here what we have used this full name and maybe emails before right so here here as soon as i am typing something it is say that it is good and even if i tap the space it is saying it is good so let's add another rule that it should not accept the white space so here if i had this rule so now if i add the white space it say full name cannot be empty right and if i add something it is saying good even if if i add a single character it is saying it is good so let us add another rule that at least it should have maybe three characters so that will be it has minimum uh three characters right if i add something if it is single character it will say fully must be at least three characters and nothing please enter your name edit one character it says full name of speech three characters and no it is three characters right so space is allowed in between right and you see uh now it is uh full the all of the rules or the conditions are fulfilled so if we want to show something a tick mark or and or the cross when it is not fulfilling so we can achieve that using a probe called as feedback here you go so now it is good it is not good it's showing across now it's good showing tick mark right so these are the validation rules we have added on the full name let's go ahead and add few rules on the email okay so let's copy these rules and add on the email so it will be required right presenter your email and instead of saying whitespace because wordpress will not be load if we say that its type is email and also the minimum three will not make sense okay so email is not a valid email enter the email by entering saying email is not valid i entered gmail.com it says good right and of course we can uh customize the messages here as well so when email is not valid we can say that suppose message please enter a valid email right and now if i enter something it will save this entire email and if i enter this one it says it is a good right so let's go ahead and add some validation on the passwords so for the password let's copy this and for the password we can say that it has a feedback and it is not an email and let's keep this one as well so we can only say that it is a required field and now if i click on register it will say that password is required and also let's add our same rules to the confirm password as well right so here you go the confirm for password is also required and if i enter something it says it's good right but right now it is not checking whether the password and the confirmed password are the same let's add that logic as well for that we will be adding a [Music] validated function here so that will be giving us a prop call get field value and using this function we will be getting the field value from the password and we will be comparing it with this value so to compare it we will be using the validator function and it will give us the rules and the current value that user has entered in the confirm password so in that what we will be doing is if there is a value in the confirm password and i mean either there is no value i mean it is empty then we don't need to show that confirm personal password matches doesn't matter and uh if there's no value or if the get field value from the password is equal to equal to uh the value we have uh we have in the confirm password so if that is the case then we will be returning uh promise.resolve so the return type is the promise so we will be saying the promise dot resolve so in both cases if this value and this value was are good then we will say a validation is correct and until we have entered any value so if there is nothing in the value until we have entered any value we won't say we will be still saying that it is good and [Music] in and if it is if this is not the case so user has entered any value but it is not equal to the password so in that case we will still returning the promise but in that case we will be rejecting it with the message we can say [Music] the two passwords that you entered does not match right and here you go save it refresh okay so if i enter something here it is saying nothing here because uh we have do not have any value here but if as soon as i enter any value it say that the two password you entered does not match so let's add one two three four and here also you can see one two three four it says no these are good but as soon as i remove anything from here it says the password doesn't match so let's match and let's go a step further so you see if i entered no these are equal but if i change this password to suppose add a fifth character it does not say it's still saying that it is good but in actual uh it is not so we will be adding a dependency between these two fields so for that that will be here we will be adding the dependencies and it can it accepts an array of uh the field names on which these are dependent so the field name is password here you go this name we need to uh pass on which it it should depend or should update its validation so let's save it refresh enter the password one two three four here again one two three four it's good and as soon as i enter a fifth character it's saying that the two password does not match and if i enter again here the fifth these are good changing here it is saying saying that the two possible does not match right so later one two three four again one two three four right so in this way we have added the validation on the password and the confirm password the password is only required and also uh if in the password we want to add things like it should have some something like it should have at least six characters in length it should have one capital letter one smaller something like that so using the similar pattern we added here so using the validator we can check whether the field contains this this type of things or not so let's add few here so maybe we can say that a minimum of six length is required for the password so it will be one two three four five six so at least six five characters right and also we can add our custom logic or uh our custom validation that the password should uh should follow us particular rejects or should uh should contain these particular alphabets so let's add that so for that we will be using the validator and in that we will be getting uh the rules and the current value and what will we will be doing is we will be checking uh if the value exists and uh suppose we want to say that this value should include uh this value includes at least the correct array if that is the case then we will be returning a promise dot resolve then that means we are saying that this password contain contains uh the password criteria otherwise we want to say that this password does not match the criteria right uh promise dot reject and with the message that we can say that password does not match criteria right save it and right now it is 1 3 4 5 six characters and as soon as uh this is matt and this is matt it is saying that the password does not match criteria and as soon as i type the character a it says that now it is met right so if i remove it still says password does not may match the criteria or first it will check uh the password is required and password does not matter criteria and it should have at least six characters and as soon as i type a it says that it's good right so here we can add any uh rejects or any logic based on the values user has entered all right so these are the validation on the password let's go ahead and go to the gender okay let's copy maybe these rules and add those to the gender so required please select yeah or maybe uh for gender instead of making it required uh let's make it optional right so let's keep this one and also this one right let's know all of the rules and instead of that we can say the required mark is optional so it will add optional here so it's up to the user you don't want to select our user can go without that right so this is how we uh use the optional fields and let's go to the data part let's make the date of birth may be required required to please provide your date of birth right this does not make sense save it so this is not a required field right so if i register simply for your data birth right and also using the valid data we have used for the password here it will give us the value and on the value we can say that suppose if it's age is more than 18 if there is more than 20 or something we want to add on the validation for the birth we can add using the validator right and for the website let's add make it maybe here it is here okay let us make it required and please enter your website url and here instead of type we can say that it is a type of url which is enter valid url right and now it is a required field and if i enter something wrong it is said please enter valid url and also if you want to make it optional we can skip this and still we can add the rule that if user has uh if although it is optional but if user has provided it it should be valid right so user cannot type anything you it it need to be a valid url so suppose google.com right it is a valid all right so let's add a as feedback here as well that looks good and we are on the date picker let's say it has feedback and let's add here you go gender it's optional okay we have added feedback on i think all of these right let's go ahead and also add few validations on this agreement so let's copy the rules okay and in the agreement let's add so here we go please we can say that to proceed uh you need to agree with our terms and conditions right so now if i just say to proceed you need to agree with our terms and conditions and now if i i'm gonna click on it it is not going so it is still saying that you have not provided the value here so because all of these fields have a value prop but this does not have it has the value it it it is the value is actually in a prop called checked or it its value is true or false so for that we can add a prop that says value prop name so it will be checked so now it will be getting the value against this uh prop so now if i click on it it says you are good and here you see if i even uncheck that it is not saying that you need to agree because it is getting the value from the checked and that this required is a true means that this checkbook should have a value so right now it has a value but the value is false so instead of doing this we need to check that each value should always should be true uh to be considered that you have agreed so for that instead of doing this we can do our custom validation as we have done here let's copy and paste it here and update the message to this one copy and paste it here and we will only checking that its value is true so let's remove this one and this is also not needed save it and now if i check it uncheck it say that you need to agree and check it it's good uncheck it's showing the error right so let's fill out uh the fields let's say you can say abc and abc at gmail.com password one two three four five six and one a character one two three four five six and a and let's change to mail and let's change this value to maybe 2 and website is added agree so here you see all of these are good and no if we click on it it will be giving us all of the values in the form function that will be on finish and it will be providing us all of the values let's console those values for now but in reality you will be maybe saving this value in the db or sending these values to the server or something like that so let's inspect and show the console and if i click on register so getting the values so right now agreement is true confirm password is this one the date of birth is uh an object we can convert this to a uh string uh date or in whatever format we need using maybe a third party moment or maybe any date formatter so email full name gender we have selected the password and website right and suppose if i refresh and if i uh click register so right now we are not getting these values so this function will be only called when all of our roles are fulfilled and user has provided all of the values then this on finish will be called and if we want to get the values before that i mean whatever user has typed or we want to get whichever fields has any error so those will be in a function on finish field and it will be giving us the error and let's console that as well okay clear it for now and here you go the error and it is saying which field has the error and right now what error is shown so suppose for the full name it is saying that please enter your name and if i enter a so and press the register let's check what is error right now for the full name no it is saying that full name must be unless you characters so whatever error is shown here we are getting uh in this function and also uh whatever user has entered in the values we will be getting that as well so full name right now i have entered a so let me add few characters here so same and let's check what is right now with the email email is has value of a right so we are getting the values as well as the fields which have the errors right so using the similar pattern uh we can add different com components from the end design here we can add the rules and the rules that are provided from the anderson also we can add a custom validator function if we want to go a little ahead or ah we can add ah dependencies between different fields and similarly we can if the value is in a different property or the prop then we can provide that as well right and we of course we on press of this button we can check what are the values are in the form right now and whether those are valid or invalid so we will be getting those village here all right so that's it on exploring the form or the form validation so still if you have any question please let me in the comments below and if you have learned something in the video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 38,805

Keywords: antd, ant design ui, reactjs, website ui development using ant design and reactJS, how to use Form component of ant design, how to get form values in antd reactjs, ant design form in react js, implement antd form onFinish, codewithaamir, ant design form validation, email field validation, password and confirm password match validation, antd form optional fields validation, how to make a required field, how to make dependent antd form fields, How to Create and Validate Ant Design Forms

Id: ajp8hmAKEhM

Length: 36min 51sec (2211 seconds)

Published: Sat Oct 30 2021