How to validate the form input is email or not using JS

navya, Credit to volkotech-solutions Dec 09

Checking the email format provided by the user is important to prevent website collapse. We can achieve this form validation using JS and here is the code.

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Email Validator</title>
  </head>
  <body>    
      <form id="form" class="form">
        <div class="form-control">
          <label for="email">Email</label>
          <input type="email" id="email" placeholder="Enter email" />
          <small>Error message</small>
        </div>
        <button type="submit">Submit</button>
      </form>
    <script src="script.js"></script>
  </body>
</html>

script.js

//Check the below script to validate the email given by the user

//getting the input from form given by user
const form = document.getElementById("form");
//passing input argument to the function	 
function checkEmail(input) {	
//definign the format of emai				
 const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
//testing the obtained email with the default format
 if (re.test(input.value.trim())) {
    console.log(input);
  } else {
    console.log(input, "Email is not valid");
  }
}

//when form submit, then the function will be called and do the rest of operations
form.addEventListener("submit", function (e) {
//prevents default action of form
 e.preventDefault();
//function call
   checkEmail(email);
});

21 likes

Add to read list

Comments

Authors

Navya

Software engineer at VolkoTech Solutions

Dedicated and skilled Drupal Frontend developer, carrying 3+ years of experience with a proven track record of delivering high-quality, scalable web solutions and optimized themes with an organized Git workflow. Proficient in JavaScript, jQuery, HTML, CSS, SASS, Bootstrap, and PHP with a deep understanding of Drupal’s architecture and modules. Strong knowledge of web development best practices and search engine optimization principles.

VolkoTech Solutions

Drupal development company in india

Drupal web development & Consulting company in India.

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

How to validate the form input is email or not using JS

Comments

Authors

Navya

VolkoTech Solutions

Read Next

Altering the User Password Reset Landing Page in Drupal 9/10

Open Link/URL in Same Tab/Window or New Tab in HTML & JS

Programmatically check table exists in database in Drupal 8/9

Creating Super Star Mahesh Babu Potrait with HTML and CSS

How to maintain multiple nodes versions in Linux Ubuntu 22

Device Compatibility & Responsive Design: Testing Guide & Best Practice

Building Responsive Web Designs with CSS Media Queries

Standards for creating a user-friendly navigation system

List of standards for better UX(User Experience)

Using CSS Grid and Flexbox to Create Responsive Web Pages

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

Must Read

Recent Blogs

Recent Snippets

How to validate the form input is email or not using JS

Related Posts

Share

Comments

Authors

Read Next