EMAIL VALIDATION WITH JQUERY: COMPLETE GUIDE

In today's digital world, effective email management is essential for any web application. Validating email addresses not only enhances the user experience but also helps maintain clean and accurate databases. In this blog, we will explore how to perform email validation using jQuery, a powerful and versatile library.

Why is email validation important?

Email address validation is crucial to ensure users provide accurate contact information and that databases are not affected by incorrect entries. Additionally, it facilitates effective communication and helps prevent fraud and abuse.

Given the severity of spam, email providers are diligent in ensuring that outgoing messages are not spam but legitimate. They also verify that email addresses have been legitimately collected.

One way to achieve this is by monitoring bounce rates. If you send many emails that bounce (due to invalid email addresses), providers may mark you as spam. Therefore, if an email provider (e.g., Gmail) receives many messages directed to non-existent addresses, they may block you.

Tools and libraries in jQuery

1. Regular expressions (regex)

jQuery provides the ability to work with regular expressions. You can create regex patterns to validate the basic structure of an email address.

  
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <button onclick="validateEmail()">Validate</button>
  

  function validateEmail() {
  var regex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9]+$/;

  var email = $('#email').val();

  if (regex.test(email)) {
      alert('Valid email.');
  } else {
      alert('Invalid email.');
  }
}

This regex pattern checks:

• A local part consisting of alphanumeric characters, dots, underscores, plus signs, and hyphens.
• The presence of the '@' symbol.
• A domain containing alphanumeric characters, dots, and hyphens.

It does NOT check:

• Whether the email address corresponds to a real domain (e.g., matthew@bigfakedomainthatisntreal.com) returns true.
• Whether the email address meets the syntax requirements of the specific email provider (e.g., the number of dots in Yahoo addresses).

Example:

2. Using an external service

The most reliable and effective way to validate emails in jQuery is to use a specific third-party API. APIs like Valid Email offer a secure REST endpoint that accepts an email address and produces a JSON response with details about the validity of the address.

The Valid Email endpoint is more reliable than a library, which is often outdated, because it is regularly updated. The API checks SMTP servers, examines MX records, syntax, and domain validity. Additionally, it can indicate whether the email is a temporary or free email.

Mass email checking can also be done through the API. To receive a report on the validity of each email from the list, simply upload a CSV file containing the email list, and the API will return a response for each address. This is excellent for email list audits. Read more about how to do it here.

Get an API key

To get started, you'll need to register to create an account and obtain an API key. With your free account, you get an API key that authenticates you to the API and allows you to make requests.

Once registered, you can view your API key on the Dashboard.

Use the API key to send a request to the API

To send the request to the API and review the JSON response, we will create a function called sendEmailValidationRequest().

  function validateEmail() {
  var email = $('#email').val();
  sendEmailValidationRequest(email)
}

function sendEmailValidationRequest(email) {
  $.ajax({
      url: `https://validemail.io/v1/validate?api_key=YOUR_API_KEY=${email}`,
      method: 'GET',
      success: function (data) {
          console.log(data);
      },
      error: function (error) {
          console.error("An error occurred contacting the API:", error);
      }
  });
}

The response should look like this:

  {
  "email": "jake@validemail.io",
  "is_valid": "Valid",
  "message": "Email is valid",
  "has_valid_format": true,
  "is_free_provider": true,
  "is_disposable": false,
  "account": "jake",
  "domain": "validemail.io"
}

This way, you can evaluate if the email is valid, temporary, free, and other aspects.

Conclusion

Email validation in web applications using jQuery emerges as an essential practice to ensure data integrity and user security. From using regular expressions for basic client-side validations to integrating external services like the Valid Email API, we have explored versatile methods. The Valid Email API stands out for its reliability, offering comprehensive validation covering syntax, domain existence, and identification of temporary or free emails. Obtaining an API key and following simple steps allows for improved email management in applications, ensuring accurate communication and protection against erroneous inputs and potential digital threats.