Build A Full-Stack Web Application with Flask And ReactJS - Part 8 Client-side Form validation

Hey there, This is part 8 of a series of videos in which we build a full stack web application using ReactJS and Python with Flask. This video targets anyone who may want to learn how to build web applications using ReactJS and Flask.

In this video, we validate our signup form using a third party tool called react-hook-form. This tool enables us to validate our form data as well as to manage the data we input in forms in a very easy easy way. It reduces the amount of code you need to write, and removes unnecessary re-renders.

Lear more about react-hook-form
Please like and subscribe for more.

SOURCE CODE:

Twitter:

Github:

Timestamps
0:00 Introduction
1:19 Installing React Hook Form
1:57 The useForm hook
4:02 Register inputs and add validation rules
10:18 Handle form data on submit
11:57 Watch for data changes in inputs
14:00 Show form errors on the frontend
17:30 Clear form input
18:35 Display all input errors
21:34 Displaying specific errors
26:01 Wrapping Up

[SsaliJonathan]

Thanks for watching. Please subscribe to this channel for more content.

[investvest]

Good job. Thanks for sharing your knowledge

[ammarhoque]

how do you make it redirect after you submit the form...or stay on the same page and change the elements when you're done submitting? That's what most websites do after a "sign in"

[brendansmith]

Another great video! For the two types of errors for the username, how can we get the case where one error renders but not the other? Let's say they give a username that is 30 characters - only the maxLength error should show up.