Mobile Validation Script (Data8)

  • 3 October 2019
  • 1 reply
  • 8 views

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('input[type=tel]', $(form));

      phoneFields.each(function(idx, el) {
        promises.push(validatePhoneAsync(el).then(reportValidationResult));
      });
    }

    if (d8Validation.email.enabled) {
        var emailFields = jQuery('input[type=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(form[0].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!


1 reply

please can you show me how i can use valid countrycode + where i have to put this on ( head or before body end tag ) ? and please tell me about the edit that i have to do for this script type=“text/javascript”

Reply