Email validation using jQuery (Various Methods)

In this article, I have provided various ways to check if email id is correct or not, or basically validating email id using jQuery or Javascript with example, you can also check C# based solution to check if validate email address in C#.

Let's take a look at jQuery based solutions one by one.

Validate Email address using Regex

Here is the simple regex function to check email using jQuery

function isEmail(email) {
  var EmailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return EmailRegex.test(email);
}

Here is the fiddle sample

Using jQuery Validate Plugin

You can also use jQuery validate plugin, which enables to do email validation of a textbox if implemented with form

We would require extra JS plugin to be used with jQuery validate for email validation, you can include it in your page using this link

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

So the sample to validate form and email would look like this

$( "#formsample" ).validate({
  rules: {
    emailfield: {
      required: true,
      email: true
    }
  }
});

So if your HTML looks like this with form

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>


<form id="formsample">
 <label for="field">Email: </label>
 <input class="left" id="emailfield" name="emailfield">
 <br/>
 <input type="submit" value="Validate Email">
</form>

Complete fiddle sample using above code will be

Using HTML5 attribute

Another simple solution would be here to use HTML 5 "pattern" attribute to validate any email.

<form>
  <input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">
  <input type="submit">
</form>

In the above HTML form, we have included pattern attribute, which has email pattern similar to regex solution one and then we can validate email address using it.

You can modify the pattern based on your need.

Here is the sample fiddle example

Validate email using plain Javascript

Although, this article is related to email validation using jQuery, but it is also a good option to use plain javascript code, instead of jQuery, as not like's to use plugins, especially when my form only has email field that needs to be validated.

And as now a days, more and more focus is given to plain JS, rather than any external library like jQuery, which increases web-page load time, so here is the sample Regex to validate email using javascript

 function validateEmail($email) {
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  return emailReg.test( $email );
}

Here is the complete Fiddle example

So, as you have seen above, these are the few methods to validate email using jquery or without jquery using Javascript or HTML5, but it is always recommended to check Email's or validate emails on Server-Side also.

You may also like to read:

Top 10 Table sorting jQuery-Javascript plugins

How to validate jQuery form validation on button click?

Email Validation using Javascript (With OR Without Regex)

HTML5 Email Validation and Phone Number Validation

Validate Email address in SQL Server