Real-Time Form Validation in React using React Form Hook Registration Form

[Music] hello everyone this is tuba mizan welcome to recording all the code used inside this video are mentioned inside the description box so if you like the work we are doing and if you're learning something from our videos please do subscribe to our channel and share it with your group because your subscription will make this type of video happen in the future so without any further ado let's get started recording is on patreon and buy me a coffee make a small contribution or donations to help us grow a medium we still offer free content on youtube and other writing platforms also don't worry there are other ways to support us share us on facebook twitter and other social media formats with your friends and ask them to subscribe the links are inside the description box registration form is one of the major part of web development but making it secure is a tough task and making it user friendly becomes even harder for a developer to go forward in this video we are going to take a look at how to make the registration form secure and even more intuitive for users to understand by displaying an error on the screen when the user submits the form using react hook form plugin for react.js our final app will look something like this here we have a registration form in this form we have some fields which include name email phone number and password and a submit button so let's type the particulars related to each field if we type any wrong input then we'll get an error just down below each field and if we correct each field our error will disappear so now let's build this app we have already built a react app using create react app command add a dependency by tapping npm install react hook form command inside the terminal this will install react hook form package from npm inside the package.json file we can see that a react hook form has been added we have also added some basic css codes inside the app.css file beforehand now open the app.js file here we remove some boilerplate code now create a folder called component inside the source file then inside it create a form.js file inside create a react functional component and change the name to form then inside app.js import the form component then inside the return of the function creator div inside the app add a class name of container create another div element and add class name of card then inside it add a form component all these class names are already mentioned inside the app.css file now open the react app using the npm start command inside the terminal and open the web browser and open local host port 3000 here we can see that our app structure is starting to build now open form.js file and import use form from react hook form react hook form is built over the react hook so it uses the same fundamentals now inside the form we create a constant and require register this will register your component into the hook form state which holds the errors handle summit which holds the state for handling the form let all these equal to use form function then create another constant on summit which holds data as a parameter and return log that data so when the user submits the form it will show data inside the console log now inside the return create a form tag and add on summit attribute then create another div and inside it wrap an h1 tag and type registration as title then create a label inside it type name below it add an input tag and type a placeholder attribute similarly create an input tag for email add another div inside it add input tag for phone number and add type attribute as number then below it create another div for password add a label and input tags and finally create an input tag and add summit as a type attribute now here we can see that a registration form finally appears now let's work on errors for our form to do first we need to create a validation method for our input tag to do so inside the input tag add a property spreader and type register the register will hold validation of input tag n also helps us to add rules for validation inside it add the name you want to give this particular input then add a comma then after it add the validation rule required is one type of validation which means that particular input needs to be filled if the required value is true and vice versa if not to check out the error we have created a custom tag called an error which has some styling if you want to use it as div then you need to make a change inside the app.css file and make an error as class name rather than tag name inside it we create a closure that will show value if certain conditions will match inside the web page inside it type errors which will be provided by react hook form inside it type a register given name then add a question mark which means that it may be possible that this value will not be there then write the type of validation we are looking for then add triple equals and name our validation name for this case we are using required then add your message which you want to show now look on the web page here we can see that when we type our name and press summit then if we remove the name field value we can see the error similarly create another validation for email add a property spreader of register mention the name email then inside it type require as true let's add another type of validation pattern this will take a regular expression pattern to check the input value here we add a pretty basic pattern for email then copy the error from the previous input then paste it below the email input tag and name to email so this will show an error for email then we check for both required as well as pattern here we can see that errors for email have appeared similarly add register for phone number here we are going to check the value of digits entered from the user if its count is less than a certain value we show an error and if the number range exceeds the maximum limit then we also show an error then create error tag for the number inside it add closure and add errors for the type of minimum length and type the message similarly add for maximum length here we can see our code is working now finally create some validation for the password add required minimum and maximum length then show error for each so this is how we can show errors using react hook form in a form so you can see that this is very easy to implement and understand and yes let us know what you liked or disliked about this video in the comment section please do like and subscribe to our channel and yes do not forget to suggest some more topics for now i'll be signing off we'll definitely see you all in the next video

Channel: Recoding

Views: 20,180

Keywords: React Form, Form Validation using React

Id: 2Yy8qdoUxKo

Length: 10min 22sec (622 seconds)

Published: Sun May 08 2022