Back ArrowExplore all topics
technology logo
technology logo

How to Validate an Email Address in JavaScript

share link

by Abdul Rawoof A R dot icon Updated: Feb 7, 2023

Guide Kit Guide Kit  

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

JavaScriptdotLines of Code : 23dotLicense : Strong Copyleft (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.

  1. Install Visual Studio Code IDE on your computer.
  2. Create a new HTML file.
  3. Copy the code using the 'Copy' button and create an HTML tag then paste the code inside the tag into that HTML file.
  4. Then keep the function lines inside the script tag(refer to preview as well).
  5. Save and run the file directly from the file location to generate the output.


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.

  1. The solution is created in Visual Studio Code 1.73.1.


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

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

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.