JS Live Field Validation
- Adam Carter
Implementing Convertr's live email and telephone validation via javascript tags.
Telephone Lookup
You'll need to embed the following script tag into the bottom of your page, below the closing `</body>` tag.
<script src="https://{your_domain}.cvtr.io/public/telephone-lookup.js?c={campaign_id}&f={form_id}&tel_id={telephone_field_id}&cc_id={telephone_country_code}" type="text/javascript" charset="utf-8" async></script>
Required Parameters
| Field | Example | Description |
|---|---|---|
c | 44001 | The ID of the Convertr campaign to track this activity to |
f | 1 | The form related to the above Campaign ID to associate this usage to |
tel_id | telephone | The HTML input id attribute to listen for change events, we'll use the value of this field as the telephone number when the user changes focus |
cc_id | country_code | The HTML input id attribute for the country code, we'll use the value of this field as the associated country code number when the user changes focus from the telephone field |
Responses
After we've performed our lookup, we'll append the result of the lookup in a new `<div>`, directly after the `tel_id` field with the following classes:
| Class | Scenario |
|---|---|
| .cvtr-telephone-feedback | All feedback `<div>`s from Convertr's telephone lookup will have this class |
| .cvtr-telephone-valid | If the result is positive then this class will be added to the above .cvtr-telephone-feedback class |
| .cvtr-telephone-error | If the result is negative then this class will be added to the above .cvtr-telephone-feedback class |
Email Lookup
You'll need to embed the following script tag into the bottom of your page, below the closing `</body>` tag.
<script src="https://{your_domain}.cvtr.io/public/email-lookup.js?c={campaign_id}&f={form_id}&email_id={email_field_id}" type="text/javascript" charset="utf-8" async></script>
Required Parameters
| Field | Example | Description |
|---|---|---|
c | 44001 | The ID of the Convertr campaign to track this activity to |
f | 1 | The form related to the above Campaign ID to associate this usage to |
email_id | The HTML input id attribute to listen for change events, we'll use the value of this field as the email address when the user changes focus |
Responses
After we've performed our lookup, we'll append the result of the lookup in a new `<div>`, directly after the `email_id` field with the following classes:
| Class | Scenario |
|---|---|
| .cvtr-email-feedback | All feedback `<div>`s from Convertr's email lookup will have this class |
| .cvtr-email-valid | If the result is positive then this class will be added to the above .cvtr-email-feedback class |
| .cvtr-email-error | If the result is negative then this class will be added to the above .cvtr-email-feedback class |
Example:
The following example will work out the box, providing you update the domain, campaign and form values to your own enterprise values.
It's recommended that you implement your own logic to prevent form submission until both lookups have their respective valid classes on the feedback elements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Convertr Live Lookup Demo</title>
<link rel="stylesheet" href="">
</head>
<body>
<form>
<div class="form-group">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="Email Address">
</div>
<div class="form-group">
<label for="tel">Telephone Number</label>
<input id="tel" name="text" type="text" placeholder="Telephone">
</div>
<input type="hidden" id="country_code" name="country_code" value="+44">
<button type="submit" name="go">Submit</button>
</form>
<script src="https://{your_domain}.cvtr.io/public/email-lookup.js?c=44001&f=1&email_id=email" type="text/javascript" charset="utf-8" async></script>
<script src="https://{your_domain}.cvtr.io/public/telephone-lookup.js?c=44001&f=1&tel_id=tel&cc_id=country_code" type="text/javascript" charset="utf-8" async></script>
</body>
</html>