Up next in 10
Build a React.js Final Form Validation With Error Messages Using react-final-form Library in JSX
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/9f51c9b9bced79d1ea3ce87fcbcd1786
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will introduce to a new
0:05
form validation library inside react
0:07
chairs which is called as react final
0:10
form this is actually the name of this
0:13
Library react final form so this Library
0:17
makes
0:17
sure so we have this nice little form
0:21
right here where we have two Fields
0:23
where we receive first name and the
0:25
email address and we have the submit and
0:27
reset button both these buttons are
0:29
disabled by default so as soon as you
0:31
write something in these input Fields
0:33
automatically this will be activated so
0:36
now you can click any of these buttons
0:38
so if you click the submit button
0:40
without entering the email address you
0:42
will see this error message popping in
0:44
that email is required so in this way
0:47
you can do the form validation and show
0:49
error messages as well so if I write the
0:52
email address click on submit button you
0:55
will actually get this data in the Json
0:58
object right here both these properties
1:00
you will get so whatever the user has
1:02
written you will get all this data so
1:05
now let's suppose if you make any sort
1:07
of mistake in entering this email
1:09
address if you don't write a valid email
1:12
address you will see this error message
1:13
changing to invalid email address so
1:17
multiple error messages you can show
1:20
depending upon what error the user has
1:22
made Let's suppose first name must be at
1:26
least five characters you will see so
1:28
multiple error messages it can be shown
1:31
so the name of this library is react
1:34
final form this is actually the library
1:37
they have their own official website as
1:40
well it's specifically made for react
1:42
CHS application it's a high performance
1:45
subscription base form State Management
1:48
library for react CH so the in order to
1:52
get started you just need to install
1:54
these two packages final form which is a
1:57
base library and then react final form
2:00
which is specifically made for react CH
2:03
just install these two packages I've
2:05
already installed it so I will show you
2:07
a very basic example just make a simple
2:10
functional
2:11
component and then we just need to
2:13
require this
2:15
package by using the import statement so
2:18
it'll be importing the actual form and
2:20
the
2:22
field both coming from this react final
2:26
form so we have required this package at
2:29
the top using the import statement now
2:32
we just need
2:34
to uh render the form so now for
2:37
rendering the form uh I will just give
2:40
it a default styling to the div just to
2:44
make everything in the center position
2:49
so after this I will use this form that
2:52
I
2:56
imported and it takes some some par
2:59
parameters some properties so the first
3:02
property it takes is the onsubmit
3:05
function so whenever you submit your
3:07
form you can define a any custom
3:10
function that you will Define so I will
3:12
just Define
3:14
this handle submit function when the
3:18
form is submitted and the second
3:20
function is used for validation so when
3:23
the data
3:25
is just submitted by to the user this
3:28
function will get executed Ed for
3:30
validation purpose so both these
3:32
functions I will Define right here so
3:35
first will be for submitting handle
3:39
submit e parameter will automatically
3:41
get passed and second function will be
3:43
for
3:48
validation so you can see inside this
3:52
validate function the entered values
3:54
will come
3:56
automatically and inside your handle
3:59
submit
4:04
here also the values will come so in
4:07
both these functions which is defined by
4:10
this Library values will automatically
4:12
pop in whatever the data has written by
4:15
the user so now we have defined both
4:18
these functions and the third function
4:21
it takes is the render function so this
4:23
render function actually contains these
4:27
three methods handle submit
4:31
submitting and
4:39
pristine so this actually takes a call
4:43
back
4:44
function and inside this you will
4:47
actually have your
4:51
form and here you'll be attaching this
4:54
on submit
4:58
function I I can just Define this
5:00
function to be handle
5:15
submit so this is the same function
5:18
which we are you can see on submit we
5:21
are simply passing
5:23
this so when the form is submitted so
5:26
now inside this form we will actually
5:30
have input
5:35
Fields so these input Fields will be
5:39
responsible for entering the user data
5:43
so the first field will be responsible
5:45
if you see we are actually allowing the
5:48
user to input the name of the person and
5:51
this will be a input field type text
5:54
here the user will write the
5:56
name and for showing the error messages
6:00
we will be using this meta object and if
6:03
any sort of error is there then we will
6:06
show this error message
6:09
so actually you can see that we are
6:12
having
6:14
these inside your render
6:17
function we are
6:25
actually displaying the form
6:38
so the main function is here is your
6:41
render function inside your render
6:43
function you will actually have all
6:45
these things handle submit submitting
6:47
and pristine and inside your render
6:49
function you actually render your actual
6:52
HTML form where you submit the form you
6:55
will call this handle submit
6:57
function and then inside you define any
7:01
sort of field right here so here we are
7:03
defining the field for getting the name
7:06
of the person and
7:08
inside here we are having this
7:10
validations input meta so where we
7:14
allowing the user to enter their
7:17
name and we are displaying these error
7:20
messages if you see right here same goes
7:23
for the age input age will be a number
7:27
so here is input type number
7:30
and same things for showing the error
7:32
message right here also and same goes
7:34
for country as well if you
7:38
see and lastly we have a submit
7:45
button and now we actually binded both
7:48
these functions which is on submit and
7:50
validate so on submit will execute
7:53
whenever you submit all your data
7:56
correctly
7:59
so what we can do here we can console
8:01
log and check the actual values received
8:05
or not and in the onsubmit
8:11
function in the validate function you do
8:14
the actual
8:15
validation and in the on submit you will
8:18
console log the values so in the
8:20
validate function right here you will
8:21
declare errors object which will be
8:25
empty so here we'll be comparing for
8:28
each
8:30
value so if the name is not entered by
8:33
the user in that case we will simply
8:37
insert
8:38
this property in this object that name
8:41
is
8:42
required in this way you can show error
8:45
messages and then we'll be having
8:47
another condition that if the name
8:50
length is smaller than three characters
8:53
in that case I need to show a error
8:55
message to the user that name must be at
8:58
least three character just
9:01
long so in this way you can bind error
9:09
messages so all the source code will be
9:12
given in the description so don't worry
9:15
about it so same goes with the age as
9:17
well age and Country as
9:21
well you can bind this
9:24
for like this all these error
9:28
messages so at last you can return these
9:31
error
9:33
messages so this completes your example
9:36
so what if you
9:38
see now by default this button will be
9:41
disabled because you haven't entered
9:44
anything if you start writing you will
9:47
see it will be activated and you will
9:49
see these error messages popping in so
9:53
age is required and then the country and
9:56
then if you click submit
9:59
you will get all
10:02
your User submitted data inside this
10:05
object and three properties name AG
10:08
country so in this way you can do very
10:11
simple form validation inside react
10:13
chairs using this package it's very
10:16
simple to configure and you can have as
10:19
as much Fields as you want and show
10:22
these error
10:25
messages so thank you very much for
10:27
watching this video and do check out my
10:30
website as well free mediat tools.com uh
10:33
which contains thousands of tools
10:36
regarding audio video and image and I
10:39
will be seeing you in the next video