Form Validation with ReactJs

Hassamkazmi

3 min readJan 13, 2021

We have two simple ways to validate our form in reactjs.

1st Way:

Create a Signup Component (class-based component) in a react app.

We will validate all four fields (Name, Email, Mobile Number & Password).

Let's get started:

First of all, we declare the initial state for all values…

const defaultState = {
name:’’,
email:’’,
phone:’’,
password:’’,
nameerr:’’,
emailerr:’’,
phoneerr:’’,
passworderr:’’
}

Call them in a constructor like this:

constructor()
{
super();
this.state= defaultState;
}

After Complete coding, Our code looks like that ==>

import {Component, React} from “react”;
const defaultState = {
name:’’,
email:’’,
phone:’’,
password:’’,
nameerr:’’,
emailerr:’’,
phoneerr:’’,
passworderr:’’
}
class Signup extends Component{
constructor()
{
super();
this.state= defaultState;
}
validate(){
}
valid(){
const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(this.state.name == ‘’){
this.setState({
nameerr:’enter UserName’
})
}
else if(!this.state.email || reg.test(this.state.email) === false){
this.setState({emailerr:”Email Field is Invalid”});
return false;
}
else if(this.state.phone.length < 11){
this.setState({
phoneerr:’Enter Valid umber’
})
}
else if(this.state.password.length < 8){
this.setState({
passworderr:’Password Should be Greater then 8 Digit’
})
}
else{
return true
}
}
submit(){
this.setState({
nameerr:””,emailerr:’’,phoneerr:’’,passworderr:’’,
})
if(this.valid()){
alert(“submitted”)
}
}
render() {
return (
<div className=”container”>
<input type=”text” placeholder=”Enter Name”
onChange ={(event)=>{
this.setState({name:event.target.value})
}} required/>
<p>{this.state.nameerr}</p>
<input type=”email” placeholder=”Enter Email”onChange ={(event)=>{
this.setState({email:event.target.value})
}}/>
<p>{this.state.emailerr}</p>
<input type=”number” placeholder=”Enter Phone Number”onChange ={(event)=>{
this.setState({phone:event.target.value})
}}/>
<p>{this.state.phoneerr}</p>
<input type=”password” placeholder=”Enter Password”onChange ={(event)=>{
this.setState({password:event.target.value})
}}/>
<p>{this.state.passworderr}</p>
<button onClick={()=>this.submit()}>Signup</button>
</div>
)
}
}
export default Signup;

By Doing this code our form is validated…

2nd Way:

We can also validate our form by using “react-validation”.

we need to install react validator in our react app by using the command

“npm i react-validation”

import validation to our app like this

“import validator from ‘validator’”

import React, { useState } from “react”;
import validator from ‘validator’
const Login = () => {
const [emailError, setEmailError] = useState(‘’)
const [numberError, setNumberError] = useState(‘’)
const validateEmail = (e) => {
var email = e.target.value
if (validator.isEmail(email)) {
setEmailError(‘Valid Email :)’)
} else {
setEmailError(‘Enter valid Email!’)
}
}
const ValidateNumber = (e) =>{
var phone = e.target.value
if (validator.isMobilePhone(phone) && ValidateNumber.length <11) {
setNumberError(‘Valid Number :)’)
} else {
setNumberError(‘Enter valid Number!’)
}
}
return (
<div style={{
margin: ‘auto’,
marginLeft: ‘300px’,
}}>
<input type=”text” id=”userEmail”
onChange={(e) => validateEmail(e)} placeholder=”Enter Email”/> <br />
<p>{emailError}</p>
<input type=”number” id=”usernumber”
onChange={(e) => ValidateNumber(e)} placeholder=”Enter Number”/> <br />
<p>{numberError}</p>
</div>
);
}
export default Login;