uh hello guys uh welcome to this video
uh so in this video I will show you a
react chairs uh Library which allows you
to do uh form validation very easily uh
let me show you the demo right
here so we will have a simple uh
registration form here uh we have three
Fields out there uh and then we have a
submit
button and as soon as you click the
submit button without entering the
details
you will see it will show you these nice
little form validation messages that
first name required last name required
so as soon as I write the fields you
will see the error messages will
instantly go
away because it's reactive as soon as
I'm writing the data in the input field
the error message will go
away and then it's a ag input field so
it is telling me that please enter the
number for age because it's numeric
input so as soon as we enter the details
click the submit button you will see
then automatically all the data will be
captured you can see the age first name
last name so in this way you can do form
validation inside your react CH
application and for this we are
using one
dependency which is react hook form if
you go to npmjs.com uh this is a very
popular uh Library specifically built
for react CHS
applications this is react hook form the
command is very simple you simply
execute this command to install this
module it's almost got 8 million uh
weekly downloads and now to get
started I will show you a very complete
example uh so this is our basic react CH
application so now to get started here
first of all we need to require this
module so at the very top right here we
will simply require the module using the
import
statement like this we first of all
import the
module by using this import
statement so after requiring it then we
just declare a simple hook
variable which will contain this
register function and the second one is
the handle submit function
so this will
be also we'll be having a third variable
which will be the
form
state which will actually hold the
errors for
us and this will be coming from this use
form Hook is it contains three functions
right here first of all the register
function by which we actually register a
input field secondly the handle submit
function which will execute whenever you
want to submit the form and thirdly all
the errors will be stored inside this
form State this is actually an object
which is used to actually store the
errors now coming to the jsx part right
here we will have a simple form
where we will allow the user to
submit in uh data right here so here we
will
have first input field right here which
will be
input type text here the user will enter
the first name so now to register a
input field we simply use inside CI
bracket we actually use
this register function dot dot dot Three
Dots and then we use this register
function of this module and here we
specify
the which data you are storing so in
this case we are storing the first name
so this variable can be anything but we
are just telling it that we are
registering it so for this we are using
this register function which is coming
from this use form hook similarly we
will have another input field where we
will be this time be storing the last
name and it also takes uh you can put
this uh field as required so the user
must fill fill out this so here you can
simply pass this VAR dator which is
required to true so this makes this
input field as required so the user must
fill out this input field and we also
have various validators more let's
suppose you can also specify a minimum
length let's suppose you allow one your
first name should be at least five
character so you should you can attach
this validator of minimum length of five
characters uh let me just put a Break
Tag so after this we can actually have a
submit button
so if you refresh your application uh
let me go to Local Host
5173 you see these two input Fields
right here we have a submit button so as
soon as I click the submit button you
will see the form will submit
automatically to prevent the form from
submitting we just need to uh bind an
onclick listener to the form right here
so right here we can bind an onsubmit
event handler so when when the form
submits we can actually bind this
function handle
submit like this so we are using this
handle submit function so as soon as the
form submits we are actually executing
this function so it will hold all the
data which is submitted so we are just
console logging the data so if you
refresh
now if I enter something right here uh
click submit you will see in the console
an object is returned to us which is
holding the first name and the last name
so if I don't enter anything still the
form
submits so for
actually displaying the error message we
can display the error message right here
so we can access the errors using this
errors DOT first
name and here we can display a simple
error message to the user that first
name is
required so now what happens if you
don't write the first name click the
submit button you will see this error
message and the form if I check the
console right here the object is not
returned so the you should first of all
need to enter the first name so as soon
as you enter this the error message will
go away so we can do the same thing
right here for the last name as well
so here we can say last name
so so in this way you can show uh these
error messages as well you can do full
form validation and uh now let's suppose
if you are receiving some kind of let's
suppose email
address so here we can register a new
input field which is email required true
and let's suppose this is actually a
email field so we can specify a pattern
right here which is for irregular
expression for email addresses so
now the user must
write the email address so it is telling
us that please include an add theate
sign
so so if you submit you will see the
object will be returned to us holding
the email first name last name so in
this way guys you can do form validation
inside react CHS using this uh package
here react hook form it's very easy to
implement and it's that's why it's very
popular package almost 8 million weekly
downloads so this is actually the
command here simply in uh just install
this package and start using this uh
this is a very simple example that I
showed you in this video so thank you
very much for watching this video and
also check out my website free mediat
tools.com which contains thousands of
tools regarding audio video and image