LeadByte Support

Unbounce Validation

Follow

UnBounce Script (email and mobile validation)
This script is for Email and Phone validation.  Two files need to be added to your UnBounce page (JavaScript + JQuery).

IMPORTANT READ
1. You will need to replace the formBlockId element with your UnBounce FormID
2. You will need to set the Email & Phone field correctly.  By default, Phone is "phone_number".
3. Where you see the Value beginning "INSERT", update this to the correct value (see example below)

Example
If you LeadByte account is mycompany.leadbyte.co.uk 

THIS
var key = 'INSERT_YOUR_ACCOUNT_NAME';

SHOULD BE THIS
var key = 'mycompany';


Adding the Script to UnBounce Page

Screenshot_2020-08-19_at_17.10.14.png


JQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>

 

Copy the below into the JavaScripts section on your UnBounce page.

UK JavaScript

<script>
var key = 'INSERT';
var account = 'INSERT';
var formBlockId = "lp-pom-form-INSERT";
// DEFAULT SETTINGS - INPUT FIELD NAME
var emailInput = "email";
var phone1Input = "phone1"; 

var createValidDivs = true;
var emailErrorMessage = '<span style="color:#FFF;">The email address is invalid, please correct</span>';
var phone1ErrorMessage = '<span style="color:#FFF;">This number is invalid, please correct</span>';

// For diffrent error message
//var emailErrorMessage = '<span style="color:#9EDC4F;">Eeek! That\'s not a real email address.</span>';
//var phone1ErrorMessage = '<span style="color:#9EDC4F;">Ooops! Number is not real, please correct</span>';

// DEFAULT SETTINGS - ICON DIV BOXES
var emailValidDiv = "emailvalid";
var phone1ValidDiv = "phone1valid";
var validEmail = false;
var validNumber = false;
var isMobileNumber = false;
var validMobile1 = false;


/*
* OVERRIDE DEFAULTS WITH USER CONFIGURED SETTINGS
*/
function nameIdOverride()
{
if(createValidDivs == true && document.getElementById(emailValidDiv) == null)
{
var html = '<div id="' + emailValidDiv +'" style="position:absolute;bottom:-10px;background:#F00;padding:0 5px;"></div>';
$('div#' + formBlockId + ' #container_' + emailInput).append(html);
}
if(createValidDivs == true && document.getElementById(phone1ValidDiv) == null)
{
var html = '<div id="' + phone1ValidDiv +'" style="position:absolute;bottom:-10px;background:#F00;padding:0 5px;"></div>';
$('div#' + formBlockId + ' #container_' + phone1Input).append(html);
}
}

nameIdOverride();

/*
* GET REQUEST TYPE AND FIELD VALUE
*/
function onBlur(field)
{
switch (field.name)
{
case emailInput:
var type = 'email';
break;
case phone1Input:
var type = 'mobile';

if (field.value != '')
{
// Remove non-numbers
regexp = new RegExp(/[^\d+]/g);
field.value = field.value.replace(regexp, '');

// validate uk phone number
regexp = new RegExp(/^(\+?44\s?|0)((1([0-9]{8,9}))|([2-3]([0-9]{9}))|(7[1-9]([0-9]{8}))|(8[0-9]([0-9]{8}))|(9[0-9]([0-9]{8})))$/);

if (regexp.test(field.value))
{
validNumber = true;
isMobileNumber = true;
}
else
{
validNumber = false;
validationResult = false;
divIdentifier = phone1ValidDiv;
errorMessage = phone1ErrorMessage;
updateImages();
return false;
}

// Test mobile number
regexp = new RegExp(/^(\+?44\s?|0)(7[1-9]([0-9]{8}))$/);
if (!regexp.test(field.value))
{
isMobileNumber = false;
validationResult = true;
divIdentifier = phone1ValidDiv;
errorMessage = '';
updateImages();
return false;
}
else
{
isMobileNumber = true;
}
}

break;
default:
alert('Unknown field name ' + field.name);
return false;
}

callREST(type, field.value, field.name);
}


/*
* BUILD AND SEND API REQUEST & DETERMIN VALIDATION REQUEST TYPE
*/
function callREST(type, value, fieldname)
{
var fieldname = fieldname;
var protocol = 'https://';

switch (type)
{
case 'email':
var url = protocol + account + ".leadbyte.co.uk/restapi/v1.2/validate/" + type + "?value=" + escape(value) + "&key=" + key + "&jsoncallback=gotEmail";

$.ajax({
type: "GET",
url: url,
dataType: "jsonp",
success: gotEmail
});
break;

case 'mobile':
var url = protocol + account + ".leadbyte.co.uk/restapi/v1.2/validate/" + type + "?value=" + escape(value) + "&key=" + key + "&tag=" + fieldname + "&jsoncallback=gotPhone";
$.ajax({
type: "GET",
url: url,
dataType: "jsonp",
success: gotPhone
});
}
}

function gotEmail(data)
{
if (data.status == 'Valid')
{
validEmail = true;
validationResult = true;
divIdentifier = emailValidDiv;
errorMessage = '';
updateImages();
}
else
{
validEmail = false;
validationResult = false;
divIdentifier = emailValidDiv;
errorMessage = emailErrorMessage;
updateImages();
}
}

function gotPhone(data)
{
if (data.status == 'Valid')
{
validMobile1 = true;
validationResult = true;
divIdentifier = phone1ValidDiv;
errorMessage = '';
updateImages();
}
else
{
validMobile1 = false;
validationResult = false;
divIdentifier = phone1ValidDiv;
errorMessage = phone1ErrorMessage;
updateImages();
}
}


/*
* UPDATE VALIDTION RESULT ICONS
*/
function updateImages()
{
document.getElementById(divIdentifier).classList.remove('valid');
document.getElementById(divIdentifier).classList.remove('invalid');

if(validationResult)
{
document.getElementById(divIdentifier).classList.add('valid');
document.getElementById(divIdentifier).innerHTML = '';
}
else
{
document.getElementById(divIdentifier).classList.add('invalid');
document.getElementById(divIdentifier).innerHTML = errorMessage;
}

if (!validEmail || !validNumber || (validNumber && isMobileNumber && !validMobile1))
{
$( 'div#' + formBlockId + ' .lp-pom-button').prop('disabled', true);
}
else
{
$( 'div#' + formBlockId + ' .lp-pom-button').prop('disabled', false);
}
}

/*
* BIND EVENT HANDLERS
*/
$('div#' + formBlockId + ' input[name="' + emailInput + '"]').on( "blur", function() { onBlur(this);});
$('div#' + formBlockId + ' input[name="' + phone1Input + '"]').on( "blur", function() { onBlur(this);});
$( 'div#' + formBlockId + ' .lp-pom-button').prop('disabled', true);
</script>


 

AU JavaScript

<script>
var key = 'f98d790142c4eaeef747f1395ee4dab6';
var account = 'yourleadstream';
var formBlockId = "lp-pom-form-58";
// DEFAULT SETTINGS - INPUT FIELD NAME
var emailInput = "email";
var phone1Input = "phone";

var createValidDivs = true;
var emailErrorMessage = '<span style="color:#FFF;">Invalid email, please correct</span>';
var phone1ErrorMessage = '<span style="color:#FFF;">Invalid mobile, please correct</span>';

// For diffrent error message
//var emailErrorMessage = '<span style="color:#9EDC4F;">Eeek! That\'s not a real email address.</span>';
//var phone1ErrorMessage = '<span style="color:#9EDC4F;">Ooops! Number is not real, please correct</span>';

// DEFAULT SETTINGS - ICON DIV BOXES
var emailValidDiv = "emailvalid";
var phone1ValidDiv = "phone1valid";
var validEmail = false;
var validNumber = false;
var isMobileNumber = false;
var validMobile1 = false;


/*
* OVERRIDE DEFAULTS WITH USER CONFIGURED SETTINGS
*/
function nameIdOverride()
{
if(createValidDivs == true && document.getElementById(emailValidDiv) == null)
{
var html = '<div id="' + emailValidDiv +'" style="position:absolute;bottom:-10px;background:#F00;padding:0 5px;"></div>';
$('div#' + formBlockId + ' #container_' + emailInput).append(html);
}
if(createValidDivs == true && document.getElementById(phone1ValidDiv) == null)
{
var html = '<div id="' + phone1ValidDiv +'" style="position:absolute;bottom:-10px;background:#F00;padding:0 5px;"></div>';
$('div#' + formBlockId + ' #container_' + phone1Input).append(html);
}
}

nameIdOverride();

/*
* GET REQUEST TYPE AND FIELD VALUE
*/
function onBlur(field)
{
switch (field.name)
{
case emailInput:
var type = 'email';
break;
case phone1Input:
var type = 'mobile';

if (field.value != '')
{
// Remove non-numbers
var regexp = new RegExp(/[^\d+]/g);
field.value = field.value.replace(regexp, '');
// Test mobile number
var regexp = new RegExp((/^((?:\+?61)|(?:\+?610)|0)(4[0-9]{8})$/));
if (!regexp.test(field.value))
{
validNumber = false;
validationResult = false;
divIdentifier = phone1ValidDiv;
errorMessage = phone1ErrorMessage;
updateImages();
return false;
}
else
{
validNumber = true;
isMobileNumber = true;
}
}

break;
default:
alert('Unknown field name ' + field.name);
return false;
}

callREST(type, field.value, field.name);
}


/*
* BUILD AND SEND API REQUEST & DETERMIN VALIDATION REQUEST TYPE
*/
function callREST(type, value, fieldname)
{
var fieldname = fieldname;
var protocol = 'https://';

switch (type)
{
case 'email':
var url = protocol + "go.webformsubmit.com/" + account + "/restapi/v1.3/validate/" + type + "?value=" + escape(value) + "&key=" + key + "&jsoncallback=gotEmail";

$.ajax({
type: "GET",
url: url,
dataType: "jsonp",
success: gotEmail
});
break;

case 'mobile':
var url = protocol + "go.webformsubmit.com/" + account + "/restapi/v1.3/validate/" + type + "?value=" + escape(value) + "&key=" + key + "&tag=" + fieldname + "&jsoncallback=gotPhone";

$.ajax({
type: "GET",
url: url,
dataType: "jsonp",
success: gotPhone
});
}
}

function gotEmail(data)
{
if (data.status == 'Valid')
{
validEmail = true;
validationResult = true;
divIdentifier = emailValidDiv;
errorMessage = '';
updateImages();
}
else
{
validEmail = false;
validationResult = false;
divIdentifier = emailValidDiv;
errorMessage = emailErrorMessage;
updateImages();
}
}

function gotPhone(data)
{
if (data.status == 'Valid')
{
validMobile1 = true;
validationResult = true;
divIdentifier = phone1ValidDiv;
errorMessage = '';
updateImages();
}
else
{
validMobile1 = false;
validationResult = false;
divIdentifier = phone1ValidDiv;
errorMessage = phone1ErrorMessage;
updateImages();
}
}


/*
* UPDATE VALIDTION RESULT ICONS
*/
function updateImages()
{
document.getElementById(divIdentifier).classList.remove('valid');
document.getElementById(divIdentifier).classList.remove('invalid');

if(validationResult)
{
document.getElementById(divIdentifier).classList.add('valid');
document.getElementById(divIdentifier).innerHTML = '';
}
else
{
document.getElementById(divIdentifier).classList.add('invalid');
document.getElementById(divIdentifier).innerHTML = errorMessage;
}

if (!validEmail || !validNumber || (validNumber && isMobileNumber && !validMobile1))
{
$( 'div#' + formBlockId + ' .lp-pom-button').prop('disabled', true);
}
else
{
$( 'div#' + formBlockId + ' .lp-pom-button').prop('disabled', false);
}
}

/*
* BIND EVENT HANDLERS
*/
$('div#' + formBlockId + ' input[name="' + emailInput + '"]').on( "blur", function() { onBlur(this);});
$('div#' + formBlockId + ' input[name="' + phone1Input + '"]').on( "blur", function() { onBlur(this);});
$( 'div#' + formBlockId + ' .lp-pom-button').prop('disabled', true);
</script>

 

IMPORTANT TO NOTE

In order to whitelist a REST API key, you NEED the lead - create permission to be added. 

Was this article helpful?
0 out of 0 found this helpful

Comments