How to Add Custom Email Validation in React Js

In this tutorial, we wil teach you how to implement a custom email validation component in react js. To integrate the custom email validation in react, we will use JavaScript’s regular expression.

A regular expression is known as a regex or rational expression. Ideally, it is a series of characters that defines a search pattern. Regex is based on string-searching algorithms best used for “find and replace” operations on strings or for input validation.

With the help of regex, we will show you how to add custom input validation in react js application. You will start from the beginning, create a separate component and create custom email validation.

Create Custom Email Validation in React Js

• Step 1: Install React Project
• Step 2: Add Bootstrap Package
• Step 3: Build Form Component
• Step 4: Register Form Component in App Js
• Step 5: Start React App

Install React Project

You have to use create-react-app for installing a brand new version of React application.

npx create-react-app react-blog

Go to the react app’s root:

cd react-blog

Add Bootstrap Package

We are using bootstrap to style the form component; however, this step is optional; you may skip it if you want.

Head over to the console, start typing the command and hit enter to install the Bootstrap CSS package in react.

npm install bootstrap

Let us import bootstrap and font awesome packages in src/App.js file.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <h2>React Js Custom Email Validation Example</h2>
    </div>
  );
}
 
export default App;

Build Form Component

Next, we have to see how use a react component for validating the form email input value.

Let us create a react component file, so, head over to create src/components folder and create the FormComponent.js file.

Update src/components/FormComponent.js file.

import React from 'react'
const emailState = {
    email: '',
    error: ''
}
class FormComponent extends React.Component {  
    
    constructor(){
        super();
        this.state = emailState;
        this.onChange = this.onChange.bind(this);
    }
    onChange(e) {
        this.setState({
            email : e.target.value
        });
    }
    emailValidation(){
        const regex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
        if(!this.state.email || regex.test(this.state.email) === false){
            this.setState({
                error: "Email is not valid"
            });
            return false;
        }
        return true;
    }
    onSubmit(){
        if(this.emailValidation()){
            console.log(this.state);
            this.setState(emailState);
        }
    }
    render(){
        return(
            <div>
                <div className="form-group mb-3">
                    <label><strong>Email</strong></label>
                    <input type="email" name="email" value={this.state.email} onChange={this.onChange} className="form-control" />
                    <span className="text-danger">{this.state.error}</span>
                </div>
                <div className="d-grid">
                    <button type="submit" className="btn btn-dark" onClick={()=>this.onSubmit()}>Submit</button>
                </div>  
            </div>
        )  
    }
}  
   
export default FormComponent;

Register Form Component in App Js

Get into the App.js file one more time and add and evoke the FormComponent as given below.

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import FormComponent from './component/FormComponent';

function App() { 
  return (
    <div className="App">
      <FormComponent />
    </div>
  );
}
export default App;

Start React App

The custom email validation component has been built, and now you have to run command and start the react app’s development server.

npm start

Conclusion

In this react custom form validation tutorial, you have learned how to make a custom email validation component in react js app.

Furthermore, we have explained how to create a react app from basic and how to create form component in react js with custom email validation.