<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/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" hidden/></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": "0537eee7-29d0-4342-9782-6ec0f4c093f7", "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"; } } }); };