<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <div class="content" id="address"> <form class="go-right"> <!-- Define email / mobile & input / result fields --> <div> <input name="telephone" value="" id="telephone" placeholder="Enter Mobile" data-validation-minlength="1" data-type="number" data-required="true" onblur="ValidateMobile()"> <span id="ValidateIcon"></span></div> <div><input id="MobileResult" type="text"/></div> </form> </div> </div>

ValidateMobile = function () { var number = document.getElementById("telephone").value; /* Retrieve mobile from input field */ var requestnumber = ("{number: " + '"' + "+61" + number.substring(1) + '"' + "}"); /* Build mobile request format */ $.ajax({/* Send mobile packet to server */ url: "https://api.experianmarketingservices.com/sync/queryresult/PhoneValidate/3.0/", async: true, type: "POST", data: (requestnumber), dataType: "json", headers: {"Auth-Token": "5495437a-964f-4d1f-ab2b-327f7cb0eb46", "Content-Type": "application/json"}, success: function (MobileResult) { /* Bind result to MobileResult */ document.getElementById("MobileResult").value = MobileResult.Certainty; if (MobileResult.Certainty === 'Verified') { /* Display icon based on result */ document.getElementById("ValidateIcon").className = "glyphicon glyphicon-ok-sign"; } else if (MobileResult.Certainty === 'Unverified') { document.getElementById("ValidateIcon").className = "glyphicon glyphicon-remove-sign"; } else { document.getElementById("ValidateIcon").className = "glyphicon glyphicon-question-sign"; } } }); };