Phone Validation

For any integration, there are two pieces of JavaScript that you need: our JavaScript library and some configuration code. See the tutorial for more details on how to add this code to the page containing your address form.

JavaScript Library

Link to the JavaScript library:

<script src="https://cc-cdn.com/generic/scripts/v1/cc_c2a.min.js"></script>

There are two options for adding the JavaScript library:

Firstly, we host the final, compacted code on a CDN. This means that to add the JavaScript library to your page, you simply need to include this link. We recommend that you use this option, as you will automatically receive updates and bug fixes. However, if you use subresource integrity checks, these will fail after an update.

Alternatively, you can download the JavaScript and host it on your own server. You can download the package here from Github.

Setup

The first step is to initialize the library and complete a setup, so that you can add forms to it.

window.cc_c2a = new clickToAddress({
	accessToken: 'xxxxx-xxxxx-xxxxx-xxxxx' // Replace this with your access token
})

TIP

This call can only be performed once on every page; please call it only once during page load.

Add Phone Validation

Adding phone validation is now quite simple, simply let the library know that there's a new form to be validated.

window.cc_c2a.addPhoneVerify({
	phone: '#phone',
	country: '#country',
	can_correct: false,
	allowed_type: 'all',
	ignore_nonnumeric_chars: false,
	beforeCorrect: function (element, result) {
		// code to run before number is corrected
	},
	onResult: function (element, result) {
		// code to run on result of api call
	}
});

Key	Type	Required	Description
phone	string	✔️	The field that you want to validate. Accepts a valid query selector, the id of a field or an HTML element.
country	string	✔️	For non-international format phone numbers, the library also needs a country code. Accepts a valid query selector (for a dropdown), the id of the dropdown, an HTML element or a callback function that the library can call when it needs to determine the active country.
can_correct	boolean		Default: true Allows the library to auto-correct mistakes in the phone number, and also to format national phone numbers. If you disable the correction, any number that isn't supplied in the correct format (ignoring spaces) will be marked as invalid.
allowed_type	string		Accepted values: all, mobile, landline. Default: all. Allows the library to reject phone numbers that don't match to the type of phone number you need to capture.
ignore_nonnumeric_chars	boolean		Default: false Ignores any non-numeric character when validating the phone number to account for custom formats. E.g (000) 000-0000.
beforeCorrect	function		Allows a function to run before the field has been populated with the corrected phone number. Modifications can be made to the result. can_correct must be true to use this feature.
onResult	function		Allows a function to run after a result is returned from our API.

Examples

Example code with a custom country callback.

window.cc_c2a.addPhoneVerify({
	phone: '#phone',
	country: function(){
		// return here the current country!
		return jQuery('#country').val();
	}
});