Twilio Realtime Phone Validation User Guide

  • Updated

Real-Time Validation uses the jQuery JavaScript framework to easily setup real-time validation for your web forms.

Background and Technical Requirements

This is meant as a very basic example for web developers to see how to setup the events and the CallBack function to handle the results and implement your own validation logic.  The design is meant to be a basic, barebones solutions so that it can be as flexible as needed and can then be integrated into any validation framework or setup chosen for the form.

As such, the example does not prevent the form from being submitted when validation fails.  Additional logic and parameters for your form will need to be setup, depending on your situation, to prevent the form from submitting with invalid addresses.

Initial Setup

First you must log into Incindio (http://app.incindio.com) and register the domain name of the site hosting the form. To do this:

  1. Log into app.incindio.com
  2. Click the ‘Dashboard’ button
  3. Click the ‘Manage’ button with the gear next to Twilio Phone Lookup
    Note: if a URL is already whitelisted in an Email Validation Application it will appear in this list as well
  4. Click the ‘RTValidation URLs’ button
  5. Select an Eloqua Account from the drop down menu
  6. Input the URL your form is hosted on in the New URL box (For example, if your form URL is “http://www.largecorporation.com/registerForConference” then register “largecorporation.com“)
  7. Click Submit
  8. The URL should now show up under the ‘Registered URLs’ list

This is how our system makes sure that no one else is trying to use your account to validate information on their own forms. 

 

Setting up a form

After the domain has been registered within Incindio, then you can add the JavaScript code to your form.

The required library for the type of validation you want to include in your form must be included in the head of the HTML document, along with jQuery 1.5 or better.  You can use the copies existing in your environment or from a CDN, but make sure to only include jQuery once before the callback setup, and only once in the page.

For Email Validation include the following lines in the <head> of the HTML document.

<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>



<script 
type="text/javascript" 
src="https://validation.incindio.com/Validation/PhoneInclude"></script>

The only other code required is including the code to wire up the validation event.  The call only requires your Eloqua Company name, the service name you want to use for validation, and a callback function to handle the response from the Twilio app.

For example, to validate a text field with the id of “Email”, the following code would be used:

<script type="text/javascript">
$(document).ready(function ()
{
    $('#PhoneNumber').ValidatePhone({
        companyName:'EloquaInstanceName',
        service:'Twilio',
        callBack:function (data)
        {
            if(!data.isValid)
            {   
                $('.ValidationStatus').append('Invalid: '+ data.Status);
                $('.ValidationStatus').show();
            }
            else
                $('.ValidationStatus').hide();
        }
    })
});
</script>

To insert the results into your form, you would need to place a <div> with a class of “ValidationStatus” somewhere in your form. Such as:

<input type="text" id="PhoneNumber" name="PhoneNumber" value=""/><br>
<div class="ValidationStatus" style="display:none"></div>

 

 

Powered by Zendesk