Email Validation using Regex in React JS

React JS is a popular front-end JavaScript library used for building dynamic
user interfaces. One of the essential parts of building a functional form is
to validate user input. Email validation is a crucial step in form validation,
as it ensures that the data entered is accurate and usable. In this article,
we will discuss email validation using Regex in React JS.

What is Regex?

[Regex](https://en.wikipedia.org/wiki/Regular_expression#:~:text=A regular expression (shortened as,strings%2C or for input validation.) is short for Regular Expressions. It is a sequence of characters that
define a search pattern. It is used to match and manipulate text based on a
pattern. Regex is widely used in programming languages like JavaScript,
Python, and PHP for pattern matching and string manipulation.

Why is Email Validation Important?

Email validation is important because email addresses are a crucial component
of communication and are often used as a means of identification. A valid
email address ensures that the communication is accurate, reliable, and
secure. Email validation also helps to prevent spam and ensures that the data
entered is accurate and usable.

Implementing Email Validation in React JS

To implement email validation in React JS, we need to use Regex. We can use
the test() method of the Regex object to test a string against a pattern. If
the string matches the pattern, the test() method returns true, otherwise, it
returns false.

Here is an example of email validation using Regex in React JS:

class EmailForm extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = {  
      email: '',  
      validEmail: false  
    }  
  }  
  handleEmailChange = (e) => {  
    const email = e.target.value;  
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;  
    const validEmail = emailRegex.test(email);  
    this.setState({ email, validEmail });  
  }  
  handleSubmit = (e) => {  
    e.preventDefault();  
    console.log('Email: ', this.state.email);  
  }  
  render() {  
    return (  
      <form onSubmit={this.handleSubmit}>  
        <label>Email:                                                     <input type="email" value={this.state.email} onChange={this.handleEmailChange} /></label>  
        <button type="submit" disabled={!this.state.validEmail}>Submit</button>  
      </form>  
    );  
  }  
}

In the example above, we define a class called EmailForm, which extends the
React.Component class. The constructor initializes the component state with an
email and validEmail property. The handleEmailChange method is called every
time the email input field changes. It tests whether the email is valid using
the emailRegex pattern and updates the state accordingly. The handleSubmit
method is called when the form is submitted, and it logs the email to the
console. The render method returns a form with an email input field and a
submit button. The button is disabled if the email is not valid.

Conclusion

In conclusion, email validation is an essential aspect of form validation, and
it ensures that the data entered by the user is accurate and usable. Regex is
a powerful tool that can be used to validate email addresses in React JS. By
using Regex, we can ensure that the email address entered by the user matches
a specific pattern and is valid. Implementing email validation using Regex in
React JS is a straightforward process that can be done by following the steps
outlined in this article.