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.