home/Everything else/Capture sample code/Phone validate/Phone validate

Phone validate

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

  1. Import phone.js to your Html page:
<!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>
  1. Define <label> and <input> elements in the <body> tag. The <input> element's value will be the phone number that will be validated.

  2. 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>
  1. Initialize the phoneValidation object and passing in the <input> element as part of the required parameter.

  2. Assign both the onSuccessHandler and onErrorHandler functions:

  • onSuccess will be called whenever the phone number is validated
  • onError will be called whenever there is an error in validating the phone number
<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>
  1. The completed page will look something like this:
<!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>
  1. Test your implementation by entering your phone number (digits only) in the textbox:


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",
    }
  });

Phone validate

  • Phone validate