Ajax Validation

Using Ajax to implement our detailed validation services.

Notice: Please refrain from using this implementation method when possible.

There are newer and better methods available, such as extending jQuery validation or making direct API requests for each respective validation service.

Basics

Our JavaScript library makes it easy to add our telephone number and email address validation services into your site.

In just a few minutes you can have our services integrated into your site to greatly improve the validation level of your telephone number and email address fields.

This sample demonstrates using our email validation and telephone validation services to validate the details entered by a user before they submit a form.

For the sample to work, you must have first added the domain name of your website to your allowed list for your Ajax key.

Add our advanced validation to your site by setting up a form with "d8validation" and "d8errortext" attributes as follows:

<input type="text" id="telephone" d8validation="phone" d8errortext="Invalid telephone number" />
<input type="text" id="email" d8validation="email" d8errortext="Invalid email address" />

We can then apply these validation rules with one line of Javascript when the page is loaded:

initializeInlineData8Validation();

or if you're using Bootstrap then:

initializeInlineBootstrapData8Validation();

and you can now not submit the form without having a valid telephone number and email address.

Example

Try our Ajax Validation yourself in our form below.

Configuration

Get started with the most common configuration settings

There are two main parts to using this script - adding the d8validation and d8errortext attributes to the form elements that require validation and the Javascript code to apply the validation.

The form elements that require validation must be tagged with a d8validation attribute indicating what validation rules should be applied to it, and a d8errortext attribute that contains the error message to be used if those rules fail. The d8validation attribute can have any of the following values:

Value	Description
`phone`	The field is validated using our Phone Validation service.
`inttelephone`	The field is validated using our International Telephone Validation service. This option is deprecated in favour of the `phone` option
`inttelephone+mobile`	As `inttelephone` but using the more advanced Mobile Validation service when the telephone number is recognised as a mobile number. This option is deprecated in favour of the `phone` option
`inttelephone+line`	As `inttelephone` but using the more advanced Landline Validation service when the telephone number is recognised as a UK landline. This option is deprecated in favour of the `phone` option
`inttelephone+mobile+line`	Uses the more advanced mobile and landline validation services where possible with a fallback to the basic telephone validation service for other numbers. This option is deprecated in favour of the `phone` option
`email`	The field is validated using our Email Validation service at domain level, i.e. validating everything to the right of the @ sign.

There are 3 available methods to initialise the Data8 validation on your form. These can be called without any parameters, or with the optional callback parameters to override the default error handling we apply. More detail can be found below:

Value	Optional Parameters	Description
`initializePopupData8Validation()`	`onFail`	Any validation errors are displayed in a popup message when the form is submitted. `onFail` can be used to override the default Data8 popup error handling function.
`initializeInlineData8Validation()`	`onFail`, `onSuccess`	Any validation errors are displayed next to the fields that failed validation as soon as the user leaves that field. `onFail` and `onSuccess` can be used to override the default Data8 inline error handling functions.
`initializeInlineBootstrapData8Validation()`	`onFail`, `onSuccess`	Use Bootstrap to display validation error messages. `onFail` and `onSuccess` can be used to override the default Bootstrap error handling functions.

Advanced Options

Our validation services can take additional options to control how they work.

You can override many of the details of how the validation script works to take fine control, for example:

Inline Error Message Styling

To change the way the error message looks, apply CSS styling to the data8error class:

<style type="text/css">
.data8error
{
    margin-left: 1em;
    border: 1px solid #ff0000;
    background-color: #ffeeee;
    padding: 2px;
}
</style>

Furthermore, it is easy to override the default error handling functions used by the Ajax validation script. As mentioned above, the initializeInlineData8Validation and initializeInlineBootstrapData8Validation methods accept optional parameters for functions that should be called when the form is validated. These methods are called with the first element that is invalid as the parameter. You can implement your own functions to use for this to show validation errors as you require, for example:

<div id="errorArea" class="data8error" style="display: none">
</div>
 
<script type="text/javascript">
 
function onValidationError(element)
{
     // Handle errors in validation by adding error messages to errored fields containing details of the error...
}
 
function onValidationSuccess(element)
{
    // Handle successful validation with positive message or other functionality...
}

initializeInlineData8Validation(onValidationError, onValidationSuccess);

</script>

Popup Error Message Styling

As mentioned above, the initializePopupData8Validation method accepts an optional parameter for a function that should be called when the form is submitted with validation errors. This method is called with the first element that is invalid as its parameter. You can implement your own function to use for this to show validation errors as you require, for example:

<div id="errorArea" class="data8error" style="display: none">
</div>
 
<script type="text/javascript">
 
function showValidationError(element)
{
    // Get a <div> element to show the errors in.
    var errorArea = document.getElementById('errorArea');
 
    // Clear out any existing errors.
    while (errorArea.hasChildNodes())
        errorArea.removeChild(errorArea.firstChild);
 
    // Add the error text to the div.
    errorArea.appendChild(document.createTextNode(element.d8errortext));
 
    // Ensure the div is shown.
    errorArea.style.display = 'block';
 
    // Set the focus to the element.
    if (element.focus)
        element.focus();
 
    if (element.select)
        element.select();
}
 
initializePopupData8Validation(showValidationError);
 
</script>

Applying Other Advanced Options

The email validation performed by the Ajax validation script is done at domain level by default (validating everything to the right of the @ symbol). However, the service can also perform validation at other levels too as described in the Email Validation documentation page. To use one of these alternative levels, specify it in the d8validationlevel attribute, for example:

<input type="text" name="email" d8validation="email" d8validationlevel="Address" />

The Ajax validation script can also make use of any advanced options that are documented for the Phone Validation or Email Validation services by including them as name=value pairs separated by ampersands in the d8options attribute, for example:

<input type="text" id="telephone"
  d8validation="phone"
  d8errortext="Invalid telephone number"
  d8options="RequiredCountry=GB&BarredPrefixes=+4490" />

For a full list of all the available options, please see the documentation for the individual services: