<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <form class="go-right"> <!-- Define email / mobile & input / result fields --> <div> <input name="email" value="" id="email" placeholder="Enter Email" data-trigger="change" data-validation-minlength="1" data-type="name" data-required="true" data-error-message="Enter Email" type="name" onblur="ValidateEmail()"> <span id="ValidateIcon"></span></div> <div><input id="EmailResult" type="text" hidden/></div> </form> </div>

ValidateEmail = function () { var email = document.getElementById("email").value; /* Retrieve email from input field */ var requestemail = ("{email: " + '"' + email + '"' + "}"); /* Build email request format */ $.ajax({/* Send email packet to server */ url: "https://api.experianmarketingservices.com/sync/queryresult/EmailValidate/1.0/", async: true, /* Set sync or async website behaviour */ type: "POST", data: (requestemail), dataType: "json", headers: {"Auth-Token": "319c4b2d-e675-4446-98c3-1d82a8d826e2", "Content-Type": "application/json"}, success: function (EmailResult) { /* Bind result to EmailResult */ document.getElementById("EmailResult").value = EmailResult.Certainty; if (EmailResult.Certainty === 'verified') { /* Display icon based on result */ document.getElementById("ValidateIcon").className = "glyphicon glyphicon-ok-sign"; } else if (EmailResult.Certainty === 'undeliverable') { document.getElementById("ValidateIcon").className = "glyphicon glyphicon-remove-sign"; } else { document.getElementById("ValidateIcon").className = "glyphicon glyphicon-question-sign"; } } }); };