React Custom Email Validation Tutorial

Custom email id validation in react js example; In this tutorial, i will show you step by step how to add a custom email validation rules with forms in react js apps.

Email Validation is a method of verifying if an email address is valid and deliverable. It also confirms if an email address has a reliable domain such as Gmail or Yahoo.

Here are the various benefits of email verification:

Ascertains accuracy of your data.
Reduces email bounces.
Saves money.
Shows accurate campaign insights
Improves customer engagement.
Increases campaign ROI.
Saves efforts in fixing bounces.
Prevents deliverability issues.

Custom Email Validation and Handling Form Data in React tutorial; i will create a form with the help of bootstrap 4 library and add the email id field into the form in react js apps. After that, implement react code for custom email validation.

Custom Email Id Validation in React Apps

Step 1 – Create React App
Step 2 – Install Bootstrap 4
Step 3 – Create Custom Email Component with Validation
Step 4 – Import Custom Email Valid Component in App.js

Step 1 – Create React App

In this step, 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 Bootstrap 4

Execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

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 Email Validation in React</h2>
    </div>
  );
}
export default App;

Step 3 – Create Custom Email Component with Validation

Create EmailValidation.js file. So, visit the src directory of your react js app and create a custom email validation component file named EmailValidation.js. And add the following code into it:

import React from 'react'
const defaultState = {
    email:null,
    emailError:null
}
class EmailValidation extends React.Component{
    constructor(){
        super();
        this.state = defaultState;
        this.handleInputChange = this.handleInputChange.bind(this);
    }
    handleInputChange(event) {
        this.setState({
            email : event.target.value
        });
    }
    validate(){
        const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        if(!this.state.email || reg.test(this.state.email) === false){
            this.setState({emailError:"Email Field is Invalid"});
            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 Email Validation - Laratutorials.com</h3><br />
                            <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="col-md-12 text-center">
                                    <button type="submit" className="btn btn-primary" onClick={()=>this.submit()}>Submit</button>
                                </div>
                            </div>
                        
                    </div>
                </div>
            </div>
        )  
    }
}
export default EmailValidation;

Note that, The validate() function check all field validation.

Step 4 – Import Custom Email Valid Component in App.js

Import EmailValidation.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import EmailValidation from './EmailValidation'
function App() {  
    
  return (  
    <div className="App">  
      <CustomFormValidation />  
    </div>  
  );  
}  
export default App;

Conclusion

React custom email validation example; In this tutorial, you have learned how to add a custom email validation rule with forms in react js apps.