Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Email validation with jQuery</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
body { padding: 5%; }
#email { margin-bottom: 20px; }
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>
<div class="row">
<div class="col-xs-12">
<h1>Email validation with jQuery</h1>
<p>Simple demo which passes email address to the API on form submit and shows a message based on response.</p>
<p>Including showing alternative suggestions for common typos such as instead of</p>
<p><a href="">Full email validation API documentation</a></p>
<form id="example_form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email address" aria-required="true" aria-invalid="false" required>
<button type="submit" class="btn btn-default" id="validate">Validate</button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src=""></script>
// Replace with your API key, test key will always return true regardless of email address
var api_key = "PCW45-12345-12345-1234X";
$(document).ready(function() {
$("#example_form").on("submit", function(e) {
function validate_email(element) {
// Grab the input text and trim any whitespace
var email_address = $(element).val().trim();
if (email_address != "") {
// Remove any previous validation results
// Create a template bootstrap alert div
var response_html = $("<div></div>", {
class: "alert",
role: "alert",
id: "email_valid"
// Create a loading message
var loading_html = $("<div></div>", {
id: "email_loading",
text: "Validating email address..."
// Create the URL including API key and encoded email address
var email_url = "" + api_key + "/emailaddress/" + encodeURIComponent(email_address);
// Call the API
url: email_url
}).done(function(data) {
// Check for alternative email address suggestion
if(data.alternative) {
// Add relevant class and message to alert template
response_html.text("Did you mean: " + data.alternative + "? ");
// Different role for ARIA, as the alert has an interactive element
response_html.attr("role", "alertdialog");
// Create a button to help user swap to suggestion easily
var change_button = $("<button></button>", {
class: "btn btn-default",
type: "button",
text: "Yes",
click: function(e) {
// Swaps the current input for the suggestion and re-run validation
// Add button to alert template
// Add alert to page after email field element
} else {
if(data.valid === true) {
// Add relevant class and message to alert template
response_html.text("Email address valid");
// Add alert to page after email field element
// Set ARIA-invalid attribute of field to false (means it is NOT invalid)
$(element).attr("aria-invalid", "false");
// Note: If "score" is less 100, it may be a generic sales@ mailbox, disposable email address or a catch all server
// More info -
} else {
// Add relevant class and message to alert template
response_html.text("Email address not valid: " + data.state);
// Add alert to page after email field element
// Set ARIA-invalid attribute of field to true (means it IS invalid)
$(element).attr("aria-invalid", "true");
// Full list of "state" responses -
}).fail(function(error) {
// Triggered if API cannot be reached or does not return 200 HTTP code
// More info -
} else {
// Could show an "email address is required" message here