Skip to content

Instantly share code, notes, and snippets.

@stephenkeable-allies

stephenkeable-allies/real-time-email-validation.html

Last active May 19, 2016 12:50
Show Gist options
  • Save stephenkeable-allies/17e2b3fdb18b43a6b4145b625fe35fbf to your computer and use it in GitHub Desktop.
Save stephenkeable-allies/17e2b3fdb18b43a6b4145b625fe35fbf to your computer and use it in GitHub Desktop.
Download ZIP
Example of how to use the new real-time email validation from Allies Computing (Using Bootstrap and jQuery) - https://www.alliescomputing.com/postcoder/email-validation
Raw
real-time-email-validation.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Email validation demo</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- 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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* CSS to animate the loading spinner icon - http://www.bootply.com/128062 */
.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
</style>
</head>
<body>
<div class="container">
<h1>Sign up</h1>
<hr>
<form>
<div class="form-group" id="email_wrapper">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputName1">Full name</label>
<input type="text" class="form-control" id="exampleInputName1" placeholder="Your name">
</div>
<button type="submit" class="btn btn-default">Sign up</button>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
// Test key of PCW45-12345-12345-1234X will always return true
// Get your API key by signing up at www.alliescomputing.com/postcoder/email-validation
var api_key = "PCW45-12345-12345-1234X";
// On blur for inline validation once user has finished typing and moved to the next field
// could be done on submit, or after keyUp plus a short delay (to check if they have stopped typing)
// Avoid calling on every keyUp or keyDown event as isn't great UX and will use credits more quickly
$("#exampleInputEmail1").on('blur', function(e) {
pcw_check_email();
});
function pcw_check_email() {
var email_address = $("#exampleInputEmail1").val();
if(email_address != "") {
// Remove any feedback classes or icons
$("#email_wrapper .alert, #email_wrapper span").remove();
$("#email_wrapper").removeClass("has-success has-feedback has-error");
// Add a set of loading classes and spinner to the field
$("#email_wrapper").addClass("has-feedback");
$("#exampleInputEmail1").after('<span class="glyphicon glyphicon-refresh form-control-feedback glyphicon-refresh-animate" aria-hidden="true"></span><span id="inputLoading2Status" class="sr-only">(validating)</span>');
// Make request to PostCoder Web with the email address URL encoded
$.getJSON( "http://ws.postcoder.com/pcw/" + api_key + "/emailaddress/" + encodeURIComponent(email_address), function( data ) {
// Remove the loading state
$("#email_wrapper .alert, #email_wrapper span").remove();
$("#email_wrapper").removeClass("has-success has-feedback has-error");
// Decide if response was valid or not
if (data.valid === false) {
// Either show the recommended alternative or the invalid message
if (data.alternative) {
$("#exampleInputEmail1").after('<span id="helpBlock2" class="help-block">Did you mean <strong>' + data.alternative + '</strong>? <a href="#" id="use_suggestion" data-alt="' + data.alternative + '">Click here to correct.</a></span>');
// Set up the click handler for the suggestion
use_suggestion_init();
} else {
// You could use data.state as your message, however it's not that friendly to all non tech saavy users
$("#exampleInputEmail1").after('<span id="helpBlock2" class="help-block">This e-mail address doesn\'t appear to be correct.</div>');
}
// Add a set of error classes and icons, could use warning
$("#email_wrapper").addClass("has-error has-feedback");
$("#exampleInputEmail1").after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span><span id="inputWarning2Status" class="sr-only">(error)</span>');
} else {
// Sometimes the email address can be valid and still have an alternative suggestion, as some people buy up spelling mistake domains.
if (data.alternative) {
$("#exampleInputEmail1").after('<span id="helpBlock2" class="help-block">Did you mean <strong>' + data.alternative + '</strong>? <a href="#" id="use_suggestion" data-alt="' + data.alternative + '">Click here to correct.</a></span>');
// Set up the click handler for the suggestion
use_suggestion_init();
// Add a set of warning classes and icons
$("#email_wrapper").addClass("has-warning has-feedback");
$("#exampleInputEmail1").after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span><span id="inputWarning2Status" class="sr-only">(warning)</span>');
} else {
// Add a set of success classes and icons
$("#email_wrapper").addClass("has-success has-feedback");
$("#exampleInputEmail1").after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputSuccess2Status" class="sr-only">(success)</span>');
}
}
// Delete this if statement if you put it into production environment
if (data.warning) {
$("form").after('<p><br><strong>'+ data.warning + '</strong></p>');
}
}).fail(function() {
// Handle these as you want to
console.log("There was an error");
});
} else {
// If email address was blank
$("#email_wrapper").addClass("has-error has-feedback");
$("#exampleInputEmail1").after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span><span id="inputWarning2Status" class="sr-only">(error)</span>');
}
}
// Function to allow user to click to swap to the suggestion then revalidate
function use_suggestion_init() {
$("#use_suggestion").off("click");
$("#use_suggestion").on("click", function(e) {
e.preventDefault();
email_suggestion = $(this).attr("data-alt");
$("#exampleInputEmail1").val(email_suggestion);
pcw_check_email();
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment