videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a React.js Form with Validation & Error Messages Using Formsy Library in Browser Using JSX
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/689586a76c3e0653e76c6d8376c232bc
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you yet
0:05
another form validation library for
0:08
react CH so inside react CH if you want
0:11
to do form validation and show error
0:14
messages as well this is a very perfect
0:16
library for doing that purpose so we
0:18
have a simple registration form right
0:20
here where we have four Fields name
0:23
email age and Country and we have a
0:26
button as well so if I don't enter
0:28
anything and click the submit button you
0:30
will see the error messages will pop in
0:33
that name is required please enter a
0:35
valid email please enter a valid age and
0:37
Country so as I write the actual name
0:41
you will see the error will go
0:44
away and
0:47
also I need to enter the valid email and
0:51
here this will only be
0:53
numbers and then F if I write the
0:56
country we see all the errors will go
0:57
away and if I click submit and you will
1:00
see the data will
1:02
be when the data is submitted you will
1:05
get this data as a Json response so it's
1:08
a form validation Library the library
1:10
name is for form Z form Z is the actual
1:13
Library name so it does the form
1:16
validation and it shows the error
1:18
messages if you see it's showing these
1:20
error
1:21
messages it also supports multiple error
1:24
messages you will see multiple
1:26
conditions can be applied you will see
1:28
name must be at least three correct
1:29
ctors long so the name field must be at
1:32
least three correctors long so in this
1:35
way you can do multiple validations at
1:37
the single time using this Library so
1:40
once the data is submitted you can get
1:42
this data inside the Json response so
1:45
now to install
1:47
this if you go to npmjs.com and just
1:50
search for fy-
1:55
react so this is actually the package
1:58
you will see that
2:01
it has almost got 21,000 weekly
2:05
downloads so this is actually the
2:06
command here and you just need to
2:08
install it I've already installed it and
2:11
one more component we need to install
2:13
which is formy react components this is
2:17
part of this
2:19
Library so you also need to install this
2:22
as well so these two packages you need
2:24
to install and after that we can do the
2:27
form validation so I will just make a
2:29
simple functional component and then I
2:32
will require both these packages by
2:34
using the import statement so you can
2:37
see we have imported form C and from the
2:40
form C react components we imported the
2:43
input
2:45
element so now I will construct the form
2:49
right here which will contain four
2:51
fields which foring the user input so
2:55
now right in the jsx itself we
2:58
will I will start St this
3:01
div just to align it everything in the
3:04
center position so all the source code
3:07
will be given in the
3:10
description so inside the div we will
3:13
have
3:14
a a H2 heading which will simply say
3:18
form
3:20
Z react example and then we will be
3:23
including this component form
3:28
Z so this is actually the parent element
3:32
form Z where we actually Define our
3:34
form so here will be having this input
3:38
field we are requiring it from formy
3:41
react components so this input
3:45
component will take some properties so
3:48
the first property will be the name
3:50
field so here you need to attach the you
3:54
can give any name of your choice but I
3:56
will just give name because here in this
3:59
field I will be allowing the user to
4:01
enter name and we can give it a property
4:04
of
4:05
label which will be shown to the user
4:08
this will be a type will be text and it
4:13
should be required this is for the
4:15
validation that the user must write
4:18
this and then we Define the validations
4:22
using this
4:24
object so inside double call brackets we
4:26
provide the validations so what
4:29
validations that you want so we want
4:32
this input field to be alpha numeric
4:36
this means that only correctors will be
4:39
defined and minimum length should be
4:42
three characters so here we are defining
4:44
minimum length should be three
4:45
characters so where we have provided the
4:48
validations these two
4:50
validations and now we can Define the
4:53
error messages as well using this
4:55
property validation
4:58
errors this will Al be an object so
5:01
Double C brackets and for is alpha
5:04
numeric if
5:06
this condition is not met for this we
5:10
will show a error message that name must
5:14
contain only letters and
5:17
numbers and then for the second
5:19
condition if this condition is not met
5:22
then we will be showing this error so
5:24
it's that easy to Define these error
5:27
messages name must be at least
5:31
characters long so for each condition if
5:34
this condition is not met then this
5:36
error message will show so very simple
5:41
so now we have defined these two
5:43
conditions and also if the value is not
5:46
entered by the user then the default
5:48
error message will be
5:50
shown is default required
5:54
value name is required
6:06
so we are simply using this is default
6:08
required value right
6:12
here so if you refresh your application
6:15
you will actually
6:23
see there will be this name input
6:26
field and I will just Define a simp Le
6:29
button to submit the form so right
6:32
here we can define a simple
6:37
button button type will be of submit and
6:41
here we'll simply
6:42
say submit so what will happen now
6:46
you'll have this button if I click this
6:48
button you'll see name is required so
6:50
these error messages is showing and also
6:53
name must be at least three characters
6:55
long so all the error messages are
6:57
showing so now what we need to do we
7:00
need to
7:06
add and also if you type a special
7:10
character then also name must contain
7:12
only letters and numbers so all these
7:14
three error messages are showing at
7:16
different conditions and now we need to
7:19
add a input
7:23
field for
7:26
receiving email so
7:32
name will be of
7:35
email label
7:40
email type email and it should be
7:45
required and we'll be providing the
7:47
validation for
7:50
eail because this is a input field which
7:53
is used to get the email of the user so
7:57
we'll be defining error message if this
7:59
error if this is not a valid email then
8:02
we simply say to the user that please
8:04
enter valid email so in this case you
8:08
will have the second field now if I
8:10
enter the name correctly but if I don't
8:13
enter the email you will see please
8:14
enter a valid email so here we do need
8:17
to enter the valid email so once you
8:20
enter your information click on the
8:22
submit button now to get submit the form
8:25
we need to bind an on
8:27
submit in the pay tag in form Z so right
8:31
here you'll be binding this
8:34
on
8:36
valid submit so here you'll be defining
8:39
a custom function which will submit the
8:41
forms so we will Define this handle
8:44
submit
8:46
function so all the data which is
8:48
entered by the user will be contained
8:50
inside this in
8:52
values and now you can simply console
8:55
log the
8:57
values you can see that
9:00
so simply if the user
9:03
right click on submit and you will see
9:07
all your data will be contained inside
9:09
this object which is a Json object which
9:12
contains these two properties email and
9:15
name so all the data is
9:18
captured inside this object so in this
9:21
way you can do very simple form
9:23
validation using this package
9:25
specifically for react CH application
9:28
which is form Z react and you can show
9:30
these error messages very easily so this
9:33
was a tutorial regarding this library
9:36
and thank you very much for watching
9:37
this video and do check out my website
9:40
as well free mediat tools.com uh which
9:43
contains thousands of tools regarding
9:45
audio video and image and I will be
9:48
seeing you in the next video