Learn To Add Custom Email Validation In React JS Example

Friends, in this tutorial, we will learn the implementation of a Custom Email Validation Component iN React JS. We will see the use of Javascript’s regular expression to integrate the custom email validation in react.

A regular expression is also known as a rational expression or regex which is a series of characters that defines a particular search pattern.

Regex is based on string-searching algorithms which are best used for “find and replace”operations on strings or for input validation.

So, now, we will start with learning the addition of custom input validation in react js application.

Learn To Create Custom Email Validation In React JS

See the following steps for adding and implementing the above-mentioned

Step 1- Install React App

The very first step of starting with it is to install a new react app using create-react-app.

npx create-react-app react-custom-email-validation

 

Now, we have to go to the react app’s root.

cd react-custom-email-validation

 

Step 2- Add Bootstrap Package

Next, for styling the form component, we will use bootstrap.

Remember that this step is optional. You can just skip it if you want.

 

Now, we head over to the console. Type the following command and then press enter in order to install Bootstrap CSS package in react.

npm install bootstrap

Further, we 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;

 

Step 3- Build Form Component

In the third step, we will learn to use a react component for validation of the form email input value.

So, now, create a react component file for which we head over to create src/components folder and create the FormCompinent.js file.

Update src/components/FormComponents.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;

 

Step 4- Start React App

Now, we have reached here where we are done with the custom email validation component. Now, run the following command and start the react app’s development server.

npm start

 

Conclusion

Hope you have easily learned how to build a custom email validation component in react js. Just need to follow the given steps for its implementation.

 

Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *