Up next in 10
React.js Tutorial to Mask your Input Fields With Validation in JSX Using react-input-mask Library
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will show you a
0:03
certain package in react CH which allows
0:05
you to do validation and mask your input
0:08
so if you want to take a specific number
0:11
in input in a specific format and do
0:14
validation this package is very much
0:16
helpful in react CH which is a input
0:19
field component react input mask so what
0:23
this component allows you to do it needs
0:26
if you want to have take some user input
0:29
in specific format with
0:33
validation so let's suppose you are
0:34
taking a phone number or address any
0:37
sort of input which needs to be
0:40
taken this is actually the package I've
0:43
already installed it so it's almost
0:44
having
0:45
3,000 weekly downloads a pretty popular
0:48
package and it mask your input so
0:51
various examples are given I will show
0:53
you a very simple
0:57
example so at the last you have this
1:00
input feied we can't write correctors so
1:03
the user can't write
1:04
correctors only numbers are supported so
1:08
in this input field here let me zoom in
1:12
uh all numbers are supported so we are
1:15
taking the phone number as input this is
1:17
the format if you see this is a nine
1:20
digigit mobile number or any sort of
1:23
number
1:25
this first five letters will come like
1:28
this and then we have the dash
1:30
and then the last four digits will look
1:32
something like this so if you want to
1:35
design this or mask your input Fields
1:38
you can use this package so first of all
1:40
you need to make a functional component
1:42
and then you need to include this
1:44
component using the import statement and
1:47
we just write import input
1:50
mask and it will be
1:53
coming from this package react input
1:57
mask it's almost 14 KOB bites and this
2:00
is actually the way to include this so
2:03
once you include this we need to declare
2:04
some State variables so we will declare
2:07
a variable for keeping track of which
2:10
value the user write for this we'll be
2:12
using the UST State
2:14
hook and then we can simply in the jsx
2:18
wherever you need to display it we will
2:20
use this component which is input
2:22
mask and it actually takes some
2:25
parameters first parameter it takes is
2:27
the actual mask
2:30
so whatever format that you want to take
2:33
the input so let's suppose
2:38
444 so we have put this restriction that
2:42
the numbers will only be written in this
2:44
format first three letters Then followed
2:46
by a dash Then followed by a dash Then
2:49
followed by a dash and then the last
2:51
three numbers so we have design uh put
2:54
this restriction validation and you can
2:57
even put a mask corrector as well so
3:00
let's suppose you all you give it a null
3:03
value right
3:05
here and then you will attach the actual
3:10
value like
3:11
this and then you can even bind a
3:14
non-change event handler so when the
3:15
value changes this event this function
3:18
will fire which is on
3:20
change and
3:23
before mask State before mask
3:32
value change I think this is actually
3:34
the
3:37
parameter so you can Bine this
3:48
function so when the value changes you
3:50
can B this function which is on
3:55
change e parameter will be pass so
3:57
you'll be setting the value
4:00
e. target. value then for the validation
4:02
we have defined this function which is
4:04
before mask value change we get the new
4:08
state and the Old State and the user
4:13
input so you'll be validating whatever
4:16
value the user writes you will be
4:18
getting this value from this new
4:23
state this is actually the validation
4:25
function so essentially we basically put
4:29
the get the value from the state then we
4:31
compare it with the validation that we
4:35
put using this if condition so here we
4:38
are checking that it should ma match
4:41
this
4:42
input the the configuration now is very
4:45
simple if you refresh
4:47
now so now you need to enter numbers in
4:50
this fashion so
5:06
so in this way you can create this or
5:08
mask your input using in react sh using
5:11
this
5:12
package uh this is actually the package
5:15
I've shown you a complete example so
5:17
thank you very much for watching this
5:19
video and do check out my website as
5:21
well free media tools.com uh which
5:25
contains thousands of tools regarding
5:27
audio video and image and I will be
5:30
seeing you in the next video