WEBVTT

00:00.680 --> 00:03.120
uh hello guys uh welcome to this video

00:03.120 --> 00:04.960
uh so in this video I will show you a

00:04.960 --> 00:08.160
react chairs uh Library which allows you

00:08.160 --> 00:12.280
to do uh form validation very easily uh

00:12.280 --> 00:15.119
let me show you the demo right

00:15.119 --> 00:18.480
here so we will have a simple uh

00:18.480 --> 00:20.519
registration form here uh we have three

00:20.519 --> 00:23.560
Fields out there uh and then we have a

00:23.560 --> 00:25.240
submit

00:25.240 --> 00:27.560
button and as soon as you click the

00:27.560 --> 00:29.640
submit button without entering the

00:29.640 --> 00:30.640
details

00:30.640 --> 00:32.800
you will see it will show you these nice

00:32.800 --> 00:34.800
little form validation messages that

00:34.800 --> 00:36.760
first name required last name required

00:36.760 --> 00:39.440
so as soon as I write the fields you

00:39.440 --> 00:41.200
will see the error messages will

00:41.200 --> 00:42.680
instantly go

00:42.680 --> 00:45.879
away because it's reactive as soon as

00:45.879 --> 00:48.640
I'm writing the data in the input field

00:48.640 --> 00:51.199
the error message will go

00:51.199 --> 00:54.879
away and then it's a ag input field so

00:54.879 --> 00:57.359
it is telling me that please enter the

00:57.359 --> 01:00.960
number for age because it's numeric

01:00.960 --> 01:03.840
input so as soon as we enter the details

01:03.840 --> 01:06.040
click the submit button you will see

01:06.040 --> 01:09.080
then automatically all the data will be

01:09.080 --> 01:12.040
captured you can see the age first name

01:12.040 --> 01:14.520
last name so in this way you can do form

01:14.520 --> 01:16.360
validation inside your react CH

01:16.360 --> 01:18.799
application and for this we are

01:18.799 --> 01:20.880
using one

01:20.880 --> 01:24.240
dependency which is react hook form if

01:24.240 --> 01:28.159
you go to npmjs.com uh this is a very

01:28.159 --> 01:31.159
popular uh Library specifically built

01:31.159 --> 01:33.119
for react CHS

01:33.119 --> 01:36.439
applications this is react hook form the

01:36.439 --> 01:38.439
command is very simple you simply

01:38.439 --> 01:40.200
execute this command to install this

01:40.200 --> 01:43.159
module it's almost got 8 million uh

01:43.159 --> 01:46.240
weekly downloads and now to get

01:46.240 --> 01:50.920
started I will show you a very complete

01:50.960 --> 01:55.399
example uh so this is our basic react CH

01:55.399 --> 01:58.000
application so now to get started here

01:58.000 --> 01:59.479
first of all we need to require this

01:59.479 --> 02:03.039
module so at the very top right here we

02:03.039 --> 02:05.159
will simply require the module using the

02:05.159 --> 02:07.560
import

02:09.280 --> 02:11.760
statement like this we first of all

02:11.760 --> 02:13.040
import the

02:13.040 --> 02:15.680
module by using this import

02:15.680 --> 02:18.800
statement so after requiring it then we

02:18.800 --> 02:22.239
just declare a simple hook

02:22.239 --> 02:24.599
variable which will contain this

02:24.599 --> 02:26.920
register function and the second one is

02:26.920 --> 02:29.959
the handle submit function

02:29.959 --> 02:32.040
so this will

02:32.040 --> 02:35.040
be also we'll be having a third variable

02:35.040 --> 02:37.280
which will be the

02:37.280 --> 02:38.800
form

02:38.800 --> 02:41.360
state which will actually hold the

02:41.360 --> 02:43.879
errors for

02:43.879 --> 02:47.319
us and this will be coming from this use

02:47.319 --> 02:50.800
form Hook is it contains three functions

02:50.800 --> 02:52.280
right here first of all the register

02:52.280 --> 02:55.040
function by which we actually register a

02:55.040 --> 02:57.840
input field secondly the handle submit

02:57.840 --> 03:00.120
function which will execute whenever you

03:00.120 --> 03:03.120
want to submit the form and thirdly all

03:03.120 --> 03:05.360
the errors will be stored inside this

03:05.360 --> 03:08.440
form State this is actually an object

03:08.440 --> 03:10.799
which is used to actually store the

03:10.799 --> 03:13.959
errors now coming to the jsx part right

03:13.959 --> 03:17.879
here we will have a simple form

03:17.879 --> 03:21.560
where we will allow the user to

03:21.560 --> 03:25.280
submit in uh data right here so here we

03:25.280 --> 03:26.519
will

03:26.519 --> 03:29.360
have first input field right here which

03:29.360 --> 03:31.040
will be

03:31.040 --> 03:33.519
input type text here the user will enter

03:33.519 --> 03:37.840
the first name so now to register a

03:37.840 --> 03:41.599
input field we simply use inside CI

03:41.599 --> 03:44.360
bracket we actually use

03:44.360 --> 03:48.519
this register function dot dot dot Three

03:48.519 --> 03:50.400
Dots and then we use this register

03:50.400 --> 03:53.200
function of this module and here we

03:53.200 --> 03:55.159
specify

03:55.159 --> 03:57.879
the which data you are storing so in

03:57.879 --> 04:01.720
this case we are storing the first name

04:02.000 --> 04:05.239
so this variable can be anything but we

04:05.239 --> 04:07.519
are just telling it that we are

04:07.519 --> 04:09.680
registering it so for this we are using

04:09.680 --> 04:12.079
this register function which is coming

04:12.079 --> 04:15.040
from this use form hook similarly we

04:15.040 --> 04:18.600
will have another input field where we

04:18.600 --> 04:22.680
will be this time be storing the last

04:25.320 --> 04:30.160
name and it also takes uh you can put

04:30.160 --> 04:33.080
this uh field as required so the user

04:33.080 --> 04:36.479
must fill fill out this so here you can

04:36.479 --> 04:38.639
simply pass this VAR dator which is

04:38.639 --> 04:41.479
required to true so this makes this

04:41.479 --> 04:44.080
input field as required so the user must

04:44.080 --> 04:47.440
fill out this input field and we also

04:47.440 --> 04:50.840
have various validators more let's

04:50.840 --> 04:54.080
suppose you can also specify a minimum

04:54.080 --> 04:57.560
length let's suppose you allow one your

04:57.560 --> 04:59.240
first name should be at least five

04:59.240 --> 05:01.720
character so you should you can attach

05:01.720 --> 05:06.199
this validator of minimum length of five

05:09.520 --> 05:14.680
characters uh let me just put a Break

05:20.479 --> 05:24.160
Tag so after this we can actually have a

05:24.160 --> 05:27.600
submit button

05:30.600 --> 05:32.840
so if you refresh your application uh

05:32.840 --> 05:36.319
let me go to Local Host

05:36.319 --> 05:39.039
5173 you see these two input Fields

05:39.039 --> 05:40.880
right here we have a submit button so as

05:40.880 --> 05:42.560
soon as I click the submit button you

05:42.560 --> 05:44.680
will see the form will submit

05:44.680 --> 05:47.360
automatically to prevent the form from

05:47.360 --> 05:50.479
submitting we just need to uh bind an

05:50.479 --> 05:52.680
onclick listener to the form right here

05:52.680 --> 05:55.919
so right here we can bind an onsubmit

05:55.919 --> 05:58.720
event handler so when when the form

05:58.720 --> 06:01.240
submits we can actually bind this

06:01.240 --> 06:04.039
function handle

06:04.039 --> 06:06.720
submit like this so we are using this

06:06.720 --> 06:08.960
handle submit function so as soon as the

06:08.960 --> 06:11.960
form submits we are actually executing

06:11.960 --> 06:13.800
this function so it will hold all the

06:13.800 --> 06:16.039
data which is submitted so we are just

06:16.039 --> 06:18.000
console logging the data so if you

06:18.000 --> 06:20.520
refresh

06:21.479 --> 06:24.960
now if I enter something right here uh

06:24.960 --> 06:28.120
click submit you will see in the console

06:28.120 --> 06:30.120
an object is returned to us which is

06:30.120 --> 06:32.120
holding the first name and the last name

06:32.120 --> 06:35.160
so if I don't enter anything still the

06:35.160 --> 06:36.000
form

06:36.000 --> 06:39.720
submits so for

06:39.720 --> 06:43.599
actually displaying the error message we

06:43.599 --> 06:47.440
can display the error message right here

06:47.440 --> 06:52.000
so we can access the errors using this

06:52.000 --> 06:55.039
errors DOT first

06:55.039 --> 06:58.440
name and here we can display a simple

06:58.440 --> 07:00.599
error message to the user that first

07:00.599 --> 07:03.160
name is

07:05.960 --> 07:08.560
required so now what happens if you

07:08.560 --> 07:10.280
don't write the first name click the

07:10.280 --> 07:12.080
submit button you will see this error

07:12.080 --> 07:15.360
message and the form if I check the

07:15.360 --> 07:17.840
console right here the object is not

07:17.840 --> 07:21.840
returned so the you should first of all

07:21.840 --> 07:24.080
need to enter the first name so as soon

07:24.080 --> 07:26.160
as you enter this the error message will

07:26.160 --> 07:28.400
go away so we can do the same thing

07:28.400 --> 07:32.919
right here for the last name as well

07:33.440 --> 07:38.039
so here we can say last name

07:39.680 --> 07:43.360
so so in this way you can show uh these

07:43.360 --> 07:45.840
error messages as well you can do full

07:45.840 --> 07:48.960
form validation and uh now let's suppose

07:48.960 --> 07:51.840
if you are receiving some kind of let's

07:51.840 --> 07:55.120
suppose email

07:56.000 --> 07:58.520
address so here we can register a new

07:58.520 --> 08:01.919
input field which is email required true

08:01.919 --> 08:04.360
and let's suppose this is actually a

08:04.360 --> 08:07.280
email field so we can specify a pattern

08:07.280 --> 08:10.560
right here which is for irregular

08:10.560 --> 08:15.120
expression for email addresses so

08:15.120 --> 08:18.840
now the user must

08:18.840 --> 08:22.599
write the email address so it is telling

08:22.599 --> 08:24.759
us that please include an add theate

08:24.759 --> 08:27.120
sign

08:27.240 --> 08:31.080
so so if you submit you will see the

08:31.080 --> 08:33.399
object will be returned to us holding

08:33.399 --> 08:35.479
the email first name last name so in

08:35.479 --> 08:37.560
this way guys you can do form validation

08:37.560 --> 08:40.880
inside react CHS using this uh package

08:40.880 --> 08:43.440
here react hook form it's very easy to

08:43.440 --> 08:45.600
implement and it's that's why it's very

08:45.600 --> 08:47.880
popular package almost 8 million weekly

08:47.880 --> 08:49.760
downloads so this is actually the

08:49.760 --> 08:53.560
command here simply in uh just install

08:53.560 --> 08:55.880
this package and start using this uh

08:55.880 --> 08:57.600
this is a very simple example that I

08:57.600 --> 09:00.160
showed you in this video so thank you

09:00.160 --> 09:02.160
very much for watching this video and

09:02.160 --> 09:04.399
also check out my website free mediat

09:04.399 --> 09:07.800
tools.com which contains thousands of

09:07.800 --> 09:12.920
tools regarding audio video and image