Bootstrap Snippet Mobile Field Verification using HTML Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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";
            }
        }
    });
};
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Mobile Field Verification"
Bootstrap 3.0.1 Snippet by tslenard

Related: See More

Questions / Comments:

"Mobile Field Verification" Bootstrap 3.0.1 Snippet by tslenard

Related: See More

Questions / Comments:

"Mobile Field Verification"
Bootstrap 3.0.1 Snippet by tslenard