Form Validation React
Form validation in React allows an error message to be displayed if the user has not correctly filled
out the form with the expected type of input.
There are several ways to validate forms in React; however, this shot will focus on creating
a validator function with validation rules.
React Custom Form Validation Example
• Step 1 – Create React App
• Step 2 – Install React Bootstrap
• Step 3 – Create Custom Form Component with Validation
• Step 4 – ImportCustom Form Component in App.js
Step 1 – Create React App
Open your terminal and execute the following command on your terminal to create a new react app:
>npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
>npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install React Bootstrap
Execute the following command to install react boostrap library into your react app:
>npm install bootstrap --save
>npm install react-bootstrap bootstrap
Add bootstrap.min.css file in src/App.js file:
import React, { Component } from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<h2>How to Add Custom Validatin with Forms in React</h2>
</div>
);
}
export default App;
Step 3 – Create Custom Form Component with Validation
Create CustomForm.js file. So, visit the src directory of your react js app and create a custom form
validation component file named CustomForm.js. And add the following code into it:
import React from 'react'
const defaultState = {
name:null,
email:null,
password:null,
nameError:null,
emailError:null,
passwordError:null
class CustomForm extends React.Component{
constructor(){
super();
this.state = defaultState;
this.handleInputChange = this.handleInputChange.bind(this);
handleInputChange(event) {
const target = event.target;
var value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
validate(){
let nameError = "";
let emailError = "";
let passwordError = "";
if(!this.state.name){
nameError = "Name field is required";
const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(!this.state.email || reg.test(this.state.email) === false){
emailError = "Email Field is Invalid ";
if(!this.state.password){
passwordError = "Password field is required";
if(emailError || nameError || passwordError){
this.setState({nameError,emailError,passwordError});
return false;
return true;
submit(){
if(this.validate()){
console.warn(this.state);
this.setState(defaultState);
render(){
return(
<div>
<div className="row">
<div className="col-md-6 offset-md-3">
<h3>React Custom Form Validation Example - Laratutorials.com</h3><br />
<div className="form-row">
<div className="form-group col-md-6">
<label>Name :</label>
<input type="text" className="form-control" name="name"
value={this.state.name} onChange={this.handleInputChange} />
<span className="text-danger">{this.state.nameError}</span>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<label>Email :</label>
<input type="email" className="form-control" name="email"
value={this.state.email} onChange={this.handleInputChange} />
<span className="text-danger">{this.state.emailError}</span>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-6">
<label>Password :</label>
<input type="password" className="form-control" name="password"
value={this.state.password} onChange={this.handleInputChange} />
<span className="text-danger">{this.state.passwordError}</span>
</div>
</div>
<div className="form-row">
<div className="col-md-12 text-center">
<button type="submit" className="btn btn-primary"
onClick={()=>this.submit()}>Submit</button>
</div>
</div>
</div>
</div>
</div>
export default CustomForm;
Step 4 – Import Custom Form Component in App.js
Import CustomForm.js file in src/App.js file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import CustomForm from './CustomForm'
function App() {
return (
<div className="App">
<CustomForm />
</div>
);
export default App;
