Phone Validate provides a global phone validation service. We currently support over 160 countries. Before starting, open sample.html file in any text editor and ensure that phone.js script is uncommented:
<script type="text/javascript" src="js/phone.js"></script>
Simple Integration
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>QAS Phone Validate</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/phone.js"></script>
</head>
<body>
</body>
</html>
Define <label>
and <input>
elements in the <body>
tag. The <input>
element's value will be the phone number that will be validated.
Define a <textarea>
element in the <body>
tag. The <textarea>
element will be used to display the phone validation result:
<body>
<label for="phoneTextBox">Phone</label>
<input id="phoneTextBox" type="text" />
<br />
<textarea id="result" style="width:330px; height:630px"></textarea>
</body>
Initialize the phoneValidation object and passing in the <input>
element as part of the required parameter.
Assign both the onSuccessHandler and onErrorHandler functions:
<body>
<label for="phoneTextBox">Phone</label><input id="phoneTextBox" type="text">
<script type="text/javascript">
$(document).ready(function() {
var $plugin = new phoneValidation(
$( "#phoneTextBox"), {
onSuccess: onSuccessHandler,
onError: onErrorHandler
});
function onSuccessHandler(data) {
// Success callback implementation
$( "#result").val(JSON.stringify(data,null, 2));
};
function onErrorHandler(jqXHR, status, errThrown) {
// Error callback implementation
$( "#result").val(JSON.stringify(jqXHR,null, 2));
};
});
</script>
</body>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>QAS Phone Validate</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/phone.js"></script>
</head>
<body>
<label for="**phone**TextBox">Phone</label>
<input id="phoneTextBox" type="text">
<br>
<textarea id="result" style="width:330px; height:330px"></textarea>
<script type="text/javascript">
$(document).ready(function() {
var $plugin = new phoneValidation(
$( "#phoneTextBox"), {
onSuccess: onSuccessHandler,
onError: onErrorHandler
});
function onSuccessHandler(data) {
// Success callback implementation
$( "#result").val(JSON.stringify(data,null, 2));
};
function onErrorHandler(jqXHR, status, errThrown) {
// Error callback implementation
$( "#result").val(JSON.stringify(jqXHR,null, 2));
};
});
</script>
</body>
</html>
Advanced Options
These are advanced options for phone.js:
Option | Description |
---|---|
proxyPath | Path pointing to the phone proxy file. |
featureVersion | Phone Validate feature version. Currently, only version 3.0 is supported. |
timeout | Timeout in milliseconds (ms) for the call to the proxy file. |
inlineMode | True - phone validation will be triggered when the textbox loses focus.False - phone validation has to be triggered manually. |
showLoading | True - loading HTML will be rendered during validation.False - loading HTML will not be rendered during validation. |
styles | CSS style classes used by the phone.js plugin to generate the HTML. |
messages | Messages to display in the generated HTML by the phone.js plugin |
onSuccess | Success handler that will be called whenever the phone validation is successful. |
onError | Error handler that will be called when there an error occurs while performing phone validation. |
Example:
var $plugin = new phoneValidation(
$( "#phoneTextBox"), {
proxyPath: "phoneValidation.ashx",
featureVersion: "3.0" ,
timeout: 10000,
inlineMode: true,
showLoading: true,
onSuccess: function (data) {
// onSuccess callback implementation
},
onError: function (jqXHR, status, errThrown) {
// onError callback implementation
},
messages: {
emptyNumber: "Please enter number.",
invalidNumber: "Please enter digits only.",
error: "Please contact Experian support.",
timeout: "Timeout."
},
styles: {
success: "success",
successInline: "success-inline",
error: "error",
errorInline: "error-inline",
loading: "loading",
correctionPhone: "correctionPhone",
phonePicklistHeader: "phonePicklistHeader",
phonePicklist: "phonePicklist",
picklistItem: "picklistItem",
picklistItemText: "picklistItemText",
closeButton: "closeButton",
}
});