Form Validation Without using any External Library or MUI
When i was learning Reactjs, that time i come across form validation and i want to make validation by my own and without any External library or MUI.
But that time i didn't know the power of Hooks we are using in Reactjs and i search about custom form validation in every website and YouTube but i didn't get any success and i knew you are also feel the same so here i am with my own custom validation (i used only useState here).
You will get the source code below and if you looking for video on this topic then visit our YouTube channel 👉 CODEMICROS
and if you found any doubt and difficult to understand then feel free to comment below and contact us in any social media
Below is the Source code and below that i explained everything about the code and how it's working behind
Now let's understand how its works
const [email, setEmail] = useState('')
const [pswd, setPswd] = useState(0)
Creating 2 hooks for handle user input that is Email and password
const [emailErr, setEmailErr] = useState('')
const [pswdErr, setPswdErr] = useState('')
Creating Hooks for error handling in email and password
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]
{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
Regex for Email validation
You can create your own Regex and i will show you how to do that soon
const changeData = (e) => {
setEmail(e.target.value)
if (re.test(email)) {
setEmailErr("")
} else {
setEmailErr('invalid Email')
}
}
This function will Run if anything change in email field such that
- first the input value will be saved into email via setEmail function and then
- the value will be test with regex and
- if it correct then error field will be empty and if it will be not matched with the Regex
- then it will show error "Invalid Email"
const pswData = (value) => {
setPswd(value)
if (value.trim().length === 0) {
setPswdErr("enter password")
} else {
setPswdErr('')
}
}
This function will Run if anything change in password field such that
- first the input value will be saved into password via setPswd function and
- then the value will be checked
- if the field is empty or not and here we used trim() function
- which will remove the space type and
- then checked the length of input values entered in password field and if the length is 0 i.e.
- the field is empty then i will show error "enter password" and if password entered then
- the error field will be empty and this will be done through hooks which we studied above.
const Show = () => {
if (!email) {
setEmailErr("Enter your email")
}
if (!pswd) {
setPswdErr("Enter your Password")
setPswdErr("")
}
else {
}
}
At the above we see if function which runs when anything will change in input field and
- But what if the both email and password fields are empty and user click on submit button
- then there should be error to show because fields are empty and
- we can't proceed if user will not filled the required field.
Here i didn't add anything into else part because soon
- i will connect it with firebase for server side validation and
- if you still didn't learn about Firebase then check out our previous article here👉Firebase
return (
<div className='outer-div'>
<div className='form'>
<input placeholder='Enter Email' onChange={changeData}
type='email' />
<span>{emailErr}</span>
<input placeholder='Enter Password' type='password'
onChange={(e) => pswData(e.target.value)} />
<span>{pswdErr}</span>
<button type='submit' onClick={Show}>Submit</button>
</div>
</div>
)
- This is just a simple form with inputs for email, password and button to submit
- and Input field have onChange which will connected with the functions we studied above and
- Below that there is {emailErr} below email input and {pswdErr} below password input closing
- these will active first if anything change in email or password field and if click on submit button
- Here we can tell how error will be show.
