Up next in 10
React.js Form Validation Tutorial With Error Messages Using react-hook-form Full Example in Browser
304 views
Apr 1, 2025
Get the full source code of application here: Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions https://youtu.be/Bon8Pm1gbX8 Hi Join the official discord server to resolve doubts here: https://discord.gg/cRnjhk6nzW Visit my Online Free Media Tool Website https://freemediatools.com/ Buy Premium Scripts and Apps Here: https://procodestore.com/
View Video Transcript
0:00
uh hello guys uh welcome to this video
0:03
uh so in this video I will show you a
0:04
react chairs uh Library which allows you
0:08
to do uh form validation very easily uh
0:12
let me show you the demo right
0:15
here so we will have a simple uh
0:18
registration form here uh we have three
0:20
Fields out there uh and then we have a
0:23
submit
0:25
button and as soon as you click the
0:27
submit button without entering the
0:29
details
0:30
you will see it will show you these nice
0:32
little form validation messages that
0:34
first name required last name required
0:36
so as soon as I write the fields you
0:39
will see the error messages will
0:41
instantly go
0:42
away because it's reactive as soon as
0:45
I'm writing the data in the input field
0:48
the error message will go
0:51
away and then it's a ag input field so
0:54
it is telling me that please enter the
0:57
number for age because it's numeric
1:00
input so as soon as we enter the details
1:03
click the submit button you will see
1:06
then automatically all the data will be
1:09
captured you can see the age first name
1:12
last name so in this way you can do form
1:14
validation inside your react CH
1:16
application and for this we are
1:18
using one
1:20
dependency which is react hook form if
1:24
you go to npmjs.com uh this is a very
1:28
popular uh Library specifically built
1:31
for react CHS
1:33
applications this is react hook form the
1:36
command is very simple you simply
1:38
execute this command to install this
1:40
module it's almost got 8 million uh
1:43
weekly downloads and now to get
1:46
started I will show you a very complete
1:50
example uh so this is our basic react CH
1:55
application so now to get started here
1:58
first of all we need to require this
1:59
module so at the very top right here we
2:03
will simply require the module using the
2:05
import
2:09
statement like this we first of all
2:11
import the
2:13
module by using this import
2:15
statement so after requiring it then we
2:18
just declare a simple hook
2:22
variable which will contain this
2:24
register function and the second one is
2:26
the handle submit function
2:29
so this will
2:32
be also we'll be having a third variable
2:35
which will be the
2:37
form
2:38
state which will actually hold the
2:41
errors for
2:43
us and this will be coming from this use
2:47
form Hook is it contains three functions
2:50
right here first of all the register
2:52
function by which we actually register a
2:55
input field secondly the handle submit
2:57
function which will execute whenever you
3:00
want to submit the form and thirdly all
3:03
the errors will be stored inside this
3:05
form State this is actually an object
3:08
which is used to actually store the
3:10
errors now coming to the jsx part right
3:13
here we will have a simple form
3:17
where we will allow the user to
3:21
submit in uh data right here so here we
3:25
will
3:26
have first input field right here which
3:29
will be
3:31
input type text here the user will enter
3:33
the first name so now to register a
3:37
input field we simply use inside CI
3:41
bracket we actually use
3:44
this register function dot dot dot Three
3:48
Dots and then we use this register
3:50
function of this module and here we
3:53
specify
3:55
the which data you are storing so in
3:57
this case we are storing the first name
4:02
so this variable can be anything but we
4:05
are just telling it that we are
4:07
registering it so for this we are using
4:09
this register function which is coming
4:12
from this use form hook similarly we
4:15
will have another input field where we
4:18
will be this time be storing the last
4:25
name and it also takes uh you can put
4:30
this uh field as required so the user
4:33
must fill fill out this so here you can
4:36
simply pass this VAR dator which is
4:38
required to true so this makes this
4:41
input field as required so the user must
4:44
fill out this input field and we also
4:47
have various validators more let's
4:50
suppose you can also specify a minimum
4:54
length let's suppose you allow one your
4:57
first name should be at least five
4:59
character so you should you can attach
5:01
this validator of minimum length of five
5:09
characters uh let me just put a Break
5:20
Tag so after this we can actually have a
5:24
submit button
5:30
so if you refresh your application uh
5:32
let me go to Local Host
5:36
5173 you see these two input Fields
5:39
right here we have a submit button so as
5:40
soon as I click the submit button you
5:42
will see the form will submit
5:44
automatically to prevent the form from
5:47
submitting we just need to uh bind an
5:50
onclick listener to the form right here
5:52
so right here we can bind an onsubmit
5:55
event handler so when when the form
5:58
submits we can actually bind this
6:01
function handle
6:04
submit like this so we are using this
6:06
handle submit function so as soon as the
6:08
form submits we are actually executing
6:11
this function so it will hold all the
6:13
data which is submitted so we are just
6:16
console logging the data so if you
6:18
refresh
6:21
now if I enter something right here uh
6:24
click submit you will see in the console
6:28
an object is returned to us which is
6:30
holding the first name and the last name
6:32
so if I don't enter anything still the
6:35
form
6:36
submits so for
6:39
actually displaying the error message we
6:43
can display the error message right here
6:47
so we can access the errors using this
6:52
errors DOT first
6:55
name and here we can display a simple
6:58
error message to the user that first
7:00
name is
7:05
required so now what happens if you
7:08
don't write the first name click the
7:10
submit button you will see this error
7:12
message and the form if I check the
7:15
console right here the object is not
7:17
returned so the you should first of all
7:21
need to enter the first name so as soon
7:24
as you enter this the error message will
7:26
go away so we can do the same thing
7:28
right here for the last name as well
7:33
so here we can say last name
7:39
so so in this way you can show uh these
7:43
error messages as well you can do full
7:45
form validation and uh now let's suppose
7:48
if you are receiving some kind of let's
7:51
suppose email
7:56
address so here we can register a new
7:58
input field which is email required true
8:01
and let's suppose this is actually a
8:04
email field so we can specify a pattern
8:07
right here which is for irregular
8:10
expression for email addresses so
8:15
now the user must
8:18
write the email address so it is telling
8:22
us that please include an add theate
8:24
sign
8:27
so so if you submit you will see the
8:31
object will be returned to us holding
8:33
the email first name last name so in
8:35
this way guys you can do form validation
8:37
inside react CHS using this uh package
8:40
here react hook form it's very easy to
8:43
implement and it's that's why it's very
8:45
popular package almost 8 million weekly
8:47
downloads so this is actually the
8:49
command here simply in uh just install
8:53
this package and start using this uh
8:55
this is a very simple example that I
8:57
showed you in this video so thank you
9:00
very much for watching this video and
9:02
also check out my website free mediat
9:04
tools.com which contains thousands of
9:07
tools regarding audio video and image
#Programming
#Software