How to Validate an Email Address in JavaScript

by Abdul Rawoof A R Updated: Jan 19, 2023

Validation is the process of checking the values entered by users. Validation ensures the user that only accurate data is transferred from the client side of the application to the server. We can validate email, password, date, mobile numbers, etc. Email validation in JavaScript is an essential part of the user experience of a web application.

A crucial aspect of verifying an HTML form is email validation. An email is divided into two parts by the '@' symbol. The first part contains the person's identity, while the other part contains the domain name at which the email is registered. JavaScript uses regular expressions to validate the email on the client side of a web application. It can be done by following steps:

Define a regular expression for validating email address
Check if the input value matches with regular expression
If it does match, send a message saying, "valid email address."
If it does not match, send a message saying, "invalid email address."

Here is an example of how you can validate an email address using JavaScript for your application:

Fig 1: Preview of the output that you will get on running this code from your IDE.

Code

JS Student Email Validation

JavaScriptLines of Code : 23License : CC BY-SA 4.0

function validateEmail() {
  // There are, I feel, better version of this regex online
  // You can check "https://emailregex.com/"
  var reg = /^([A-Za-z0-9_\-\.]){1,}\@([A-Za-z0-9_\-\.]){1,}\.([A-Za-z]{2,4})$/;

  // document.getElementById() - Easier to read & understand, and more widely used
  var address = document.getElementById('Email').value;

  // Corrected your returns - not the main issue in the function, but the old
  // returns might have caused confusion
  if (reg.test(address) == false) {
    alert("Email not valid");
    return false
  }
  return true
}
<form id="personalInfo">
  <h2>Email: </h2>
  <input type="text" name="Email" id="Email">
</form>

<!-- You had a typo on the onclick but has since been fixed -->
<input type="button" onclick="validateEmail()" value="Submit">

Instructions

Follow the steps carefully to get the output easily.

Install the Node.js and React on your IDE(preferable Visual Studio Code).
Create React Application using npx create-react-app foldername.
cd foldername.
Open the folder in IDE.
Copy the code using "copy" button above then create html folder in the name of validate.html and paste it in validate.html folder.
Go to the file location and then double click on the folder to run the file.

I found this code snippet by searching for 'js email validation' you can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in Visual Studio Code 1.73.1.
The solution is tested on node v18.12.1 and npm v8.19.2.

Using this solution, we are able to validate an email address using javascript with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to validate an email address using javascript.

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page.

Open Weaver – Develop Applications Faster with Open Source

kandi

Develop Custom Functions

Develop Projects with Kits

Explore Popular Libraries

Product Tour

FAQ

Community and Support

Live Bootcamps

Self Paced Certifications

Hackathons and Events

Company

Terms
Privacy policy