Hi Guys, need a bit of help. Trying to incorporate Phone Number Validation with Data8.
This script gets us 99% there, in that it validates the number field perfectly. However, when the form is then submitted, it doesn’t register as a lead and displays a blank page.
<script type="text/javascript">
// Global config for Data8 validation
var d8Validation = {
apiKey: "HWCE-4AZM-K8DG-HIWJ",
email: {
enabled: false,
level: "Address",
msg: "Email address is invalid"
},
phone: {
enabled: true,
useLineValidation: true,
useMobileValidation: true,
defaultCountryCode: 44,
msg: "Phone number is invalid"
}
};
// Runs on form submission
function startData8Validation(e, $) {
e.preventDefault();
// Build an array of validation callbacks
var promises = =];
// Find the form and all the phone & email fields in it
var form = jQuery(".lp-pom-form form");
if (d8Validation.phone.enabled) {
var phoneFields = jQuery('inpututype=tel]', $(form));
phoneFields.each(function(idx, el) {
promises.push(validatePhoneAsync(el).then(reportValidationResult));
});
}
if (d8Validation.email.enabled) {
var emailFields = jQuery('inpututype=email]', $(form));
emailFields.each(function(idx, el) {
promises.push(validateEmailAsync(el).then(reportValidationResult));
});
}
// Wait for all the callbacks to complete. If the form is then valid, submit it
Promise.all(promises).then(function(values) {
if(formr0].reportValidity()){
$(form).submit();
window.location.href = window.ub.form.url;
}
});
}
function validateEmailAsync(field, valid) {
return new Promise(function (resolve, reject) {
var params = {
email: field.value,
level: d8Validation.email.level,
options: {
ApplicationName: 'Unbounce'
}
}
var req = new XMLHttpRequest();
req.open("POST", "https://webservices.data-8.co.uk/EmailValidation/IsValid.json?key=" + d8Validation.apiKey);
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.onreadystatechange = function () {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
var result = JSON.parse(this.response);
if (!result.Status.Success)
resolve({ field: field, valid: true });
else if (result.Result !== "Invalid")
resolve({ field: field, valid: true });
else
resolve({ field: field, valid: false, msg: d8Validation.email.msg });
} else {
resolve({ field: field, valid: true });
}
}
};
req.send(window.JSON.stringify(params));
});
}
function validatePhoneAsync(field, valid) {
return new Promise(function (resolve, reject) {
var params = {
telephoneNumber: field.value,
defaultCountry: d8Validation.phone.defaultCountryCode,
options: {
UseLineValidation: d8Validation.phone.useLineValidation,
UseMobileValidation: d8Validation.phone.useMobileValidation,
ApplicationName: 'Unbounce'
}
}
var req = new XMLHttpRequest();
req.open("POST", "https://webservices.data-8.co.uk/InternationalTelephoneValidation/IsValid.json?key=" + d8Validation.apiKey);
req.setRequestHeader("Accept", "application/json");
req.setRequestHeader("Content-Type", "application/json; charset=utf-8");
req.onreadystatechange = function () {
if (this.readyState === 4) {
req.onreadystatechange = null;
if (this.status === 200) {
var result = JSON.parse(this.response);
if (!result.Status.Success)
resolve({ field: field, valid: true });
else if (result.Result.ValidationResult !== "Invalid")
resolve({ field: field, valid: true });
else
resolve({ field: field, valid: false, msg: d8Validation.phone.msg });
} else {
resolve({ field: field, valid: true });
}
}
};
req.send(window.JSON.stringify(params));
});
}
function reportValidationResult(result) {
if (result.valid) {
result.field.setCustomValidity("");
}
else {
result.field.setCustomValidity(result.msg);
}
result.field.reportValidity();
return result;
}
// Waits until window load to initialize
jQuery(document).ready(function(){
jQuery(function($) {
$('.lp-pom-form .lp-pom-button').unbind('click tap touchstart').bind('click.formSubmit tap.formSubmit touchstart.formSubmit', function(e) {
startData8Validation(e, $);
});
$('form').unbind('keypress').bind('keypress.formSubmit', function(e) {
if(e.which === 13 && e.target.nodeName.toLowerCase() !== 'textarea')
startData8Validation(e, $);
});
});
});
</script>
Any help would be appreciated!