0151 355 4555

jQuery Telephone & Email Validation

The jQuery Telephone & Email Validation script extends the normal jQuery Validation plugin with our enhanced telephone & email validation services.

The additional validation rules are defined via the class attribute as normal:

<input type="text" id="telephone" name="telephone"
  class="required d8val_inttelephone" />

<input type="text" id="email" name="email"
  class="required d8val_email" />

These validation rules are applied as normal using the jQuery Validation plugin:

$("form").validate()

Configuration

Our enhanced validation rules can be applied to your form in the same way as any other jQuery Validation rules. In the example here we've used the standard class attribute on each element to identify the rules to apply.

The class attribute should contain a list of all the validation rules to apply to that form element. In addition to the standard jQuery Validation rules, you can also use any of the following:

  • d8val_inttelephone - the field is validated using our international telephone validation service.
  • d8val_inttelephone_mobile - as d8val_inttelephone but using the more advanced mobile validation service when the telephone number is recognised as a mobile number.
  • d8val_inttelephone_line - as d8val_inttelephone but using the more advanced telephone line validation service when the telephone number is recognised as a UK landline.
  • d8val_inttelephone_mobile_line - uses the more advanced mobile and landline validation services where possible with a fallback to the basic international telephone validation service for other numbers.
  • d8val_email - the field is validated using our email validation service at domain level, i.e. validating everything to the right of the @ sign.

After marking up the fields to be validated in this way you must call the validate() method on the form to enforce the validation rules as normal. Please see the jQuery Validation plugin documentation for further information.

Getting more control

A default message of "Please enter a valid telephone number." or "Please enter a valid email address." will be shown when one of these validation rules fails. If you want to show your own custom message you can do so using the standard jQuery Validation method as shown in the example below.

$("form").validate({
	messages: {
		telephone: {
			required: "Enter a telephone number",
			d8val_telephone: "Check your telephone number"
		}
	}
});

If you need to specify any of the advanced options described on the validation services' individual documentation pages, you can do so by specifying the rules in the parameters to the validate method, and using the "_opt" version of the validation rule. The example below demonstrates using the BarredPrefixes option for the telephone validation service to prevent anyone entering a UK 090 premium rate number.

$("form").validate({
	rules: {
		telephone: {
			required: "Enter a telephone number",
			d8val_inttelephone_opt: [ { name: 'BarredPrefixes', value: '+4490' } ]
		}
	}
});

The default country code used for validating international telephone numbers can also be controlled in the same way. The example below demonstrates changing the default country code to "1" for North America. If not specified, it defaults to 44 (UK).

$("form").validate({
    rules: {
        telephone: {
            required: "Enter a telephone number",
            d8val_inttelephone_opt: [ { name: 'defaultCountry', value: '1' } ]
        }
    }
});

Dependencies

For this script to work you must also include the following scripts in your page: