Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
150 lines (104 sloc) 6.39 KB
<!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">
<title>Mobile number validation with jQuery</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body { padding: 5%; }
#mobile { margin-bottom: 20px; }
</style>
<!-- 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="col-xs-12">
<h1>Mobile number validation with jQuery</h1>
<p>Simple demo which passes mobile phone number to the API on form submit and shows a message based on response.</p>
<p>For non UK numbers you will need to include the country code at the start, in either +44 or 0044 format</p>
<p><a href="https://developers.alliescomputing.com/postcoder-web-api/mobile-validation">Full mobile validation API documentation</a></p>
<br><hr><br>
<form id="example_form">
<div class="form-group">
<label for="mobile">Mobile number</label>
<input type="tel" class="form-control" id="mobile" placeholder="Mobile number" aria-required="true" aria-invalid="false" required>
</div>
<button type="submit" class="btn btn-default" id="validate">Validate</button>
</form>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// Replace with your API key, test key will always return true regardless of mobile number
var api_key = "PCW45-12345-12345-1234X";
$(document).ready(function() {
$("#example_form").on("submit", function(e) {
e.preventDefault();
validate_mobile("#mobile");
})
});
function validate_mobile(element) {
// Grab the input text and trim any whitespace
var mobile_number = $(element).val().trim();
if (mobile_number != "") {
// Remove any previous validation results
$("#mobile_valid").remove();
// Create a template bootstrap alert div
var response_html = $("<div></div>", {
class: "alert",
role: "alert",
id: "mobile_valid"
});
// Create a loading message
var loading_html = $("<div></div>", {
id: "mobile_loading",
text: "Validating mobile number..."
});
$(element).after(loading_html);
// Create the URL including API key and encoded mobile number
var mobile_url = "https://ws.postcoder.com/pcw/" + api_key + "/mobile/" + encodeURIComponent(mobile_number);
// Call the API
$.ajax({
url: mobile_url
}).done(function(data) {
$("#mobile_loading").remove();
if(data.valid === true) {
// Add relevant class and message to alert template
response_html.addClass("alert-success");
response_html.text("Mobile number valid");
// Add alert to page after mobile field element
$(element).after(response_html);
// Set ARIA-invalid attribute of field to false (means it is NOT invalid)
$(element).attr("aria-invalid", "false");
// Additional info such as Network is also returned, full details - https://developers.alliescomputing.com/postcoder-web-api/mobile-validation
} else {
// Add relevant class and message to alert template
response_html.addClass("alert-danger");
response_html.text("Mobile number not valid: " + data.state);
// Add alert to page after mobile field element
$(element).after(response_html);
// Set ARIA-invalid attribute of field to true (means it IS invalid)
$(element).attr("aria-invalid", "true");
// Full list of "state" responses - https://developers.alliescomputing.com/postcoder-web-api/mobile-validation
}
}).fail(function(error) {
$("#mobile_loading").remove();
// Triggered if API cannot be reached or does not return 200 HTTP code
// More info - https://developers.alliescomputing.com/postcoder-web-api/error-handling
});
} else {
// Could show an "mobile number is required" message here
}
}
</script>
</body>
</html>
You can’t perform that action at this time.