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.
Recommended React Tutorials
- How To Install React App On Windows 10
- React Axios – Make HTTP GET Requests Example
- React Axios – Make HTTP POST Requests Example
- React Get Form Values On Submit Tutorial
- React Tutorial – How To Use Font Awesome 5 in React
- React 17 Axios File Upload Example
- React js Get Multiple Checkbox Value On Submit
- How to Get Current Date and Time in React Apps
- React 17 Hide Show Toggle Tutorial
- React Bootstrap Modal – Implement Bootstrap Modal Ex
- React Image Upload With Preview Tutorial
- React Select Dropdown With Bootstrap Example