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

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 gonna 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.
Source Code : github.com/rec...
Checkout full playlist : • React Projects
Timeline
Intro (00:00)
Support us on
☕ @Buy me a coffee - www.buymeacoff...
🎗@Patreon - / recoding_io
Follow us on
📝 @Medium - / recoding
🐦 @Twitter - / recoding_io
🦄 @Dev.to - dev.to/recoding
📌 @Pinterest.com - / recoding_io
🔗 @LinkedIn.com - / recoding-io
#️⃣ @Hashnode - recoding.hashn...

[@AnkitKumar-xq5xe]

Easy to understand. To the point

[@letem748]

i get this error: The tag is unrecognized in this browser.

[@arunavamukherjee7549]

Great video. Simple and effective. Thanks

[@tremolony4924]

Excellent video. Thank you sir

[@namaltharindu3235]

good job.thanks for the help.

[@Lit_Recap]

very simple, thank you

[@AjayBhargav-tb1ol]

Great explanation and how do you display the error for select tag ?

[@Recoding]

Could you please further describer your question as what is select tag?

[@karimkouki9206]

thnks ❤

[@Lit_Recap]

how do you display the error for a type of radio buttons if they are not slected

[@Recoding]

Use this code, The Radio Button will show error when not selected, hope your query might be resolved.
Occupation
Job
Freelancer
{errors. occupation?.type === "required" && "Occupation is required"}

[@abdouskittou8561]

Thank you so much.

[@Recoding]

You're welcome!

[@arunavamukherjee7549]

How how do clear the form input without refreshing the browser?

[@Recoding]

Create a new React Hook for all the fields inside the form
const [values, setValues] = useState({
name: '',
email: '',
phone: '',
});
Then inside each input tag add value parameter
Similarly do for all the input tags
Then when user click submit button and there is no error inside the form state
we can set the value of these states to empty string value

[@arunavamukherjee7549]

Awesome thank you

[@arunavamukherjee7549]

Also how do you confirm the password? Thanks

[@Recoding]

To do so you need to require more function from React Hook Form
const { register, errors, handleSubmit, watch } = useForm({});
Then create a reference of Password
const password = useRef({});
password.current = watch("password", "");
{errors.password && {errors.password.message}}
Then inside the password confirm input box add a ref function and check that if the password is matching or not
value === password.current || "The passwords do not match"
})}
/>
{errors.password_repeat && {errors.password_repeat.message}}

[@arunavamukherjee7549]

You are awesome. Thanks for the prompt reply.

[@tonyg_nerd]

Please change title to "using React Hook Form"

[@sathish2654]

Worst not explaining properly 🤬🤬🤬🤬

[@Recoding]

Could you please tell us more detail explanation what didn't you understand, we'll let you know the complete concept of this video.