This script helps you validate your form data before submission as shown.
To understand how this script works, check the following video tutorial:
To get started, follow these steps:
1. Add the following CSS in your form CSS section, notice this css contains two classes ‘no-validation’ and ‘yes-validation’ you can add your custom styles for the form button when validation is true for all elements or is not:
.success {background-color: #d4edda;border-color: #c3e6cb;}.bad {background-color: #f8d7da;border-color: #f5c6cb;} .no-validation {cursor: not-allowed;} .yes-validation { cursor:pointer; }
- 2. After you have added the custom CSS to your form, copy the following script to a custom script element on your form.
- 3. Make sure you change the values of object keys in the validationConfig array as
- 1. name: Provide query_key value of the input. If you do not want to validate a certain field just don’t add it to this array.
- 2. action: Two events are supported and should be passed to this key i.e. “blur” and “keyup”.
- 3. err_msg: You must provide an error message if a regex test fails.
- 4.regex: You must provide a valid regex here. an example could be /^([0-9]{1,2})(.|-|\/)([0-9]{1,2})(.|-|\/)([0-9]{4})$/ notice this regex must be enclosed in slashes “/”. This particular regex validates a valid date in mm.dd.yyyy, mm-dd-yyyy or mm/dd/yyyy. Regex cannot be enclosed in quotes.
- 4. You can add as many objects as you wish in this array.
Copy the following script to the custom HTML block on your form
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script>
var surveyButtonBehavior = "disable"; // can be set to "hide" as well
var validationConfig = [
{
name: "pXszRaLIuRfXxBpzpBCl",
action: "blur",
err_msg:
"Double check the system size entered and ensure you have entered the whole number in terms of Watts.",
regex: /^\d+$/,
},
];
/**Execute main script **/
//Global vars
var showNextButton = false;
var validStatus = [];
function validate(element, pattern, error_msg) {
var parent = element.parent();
var error = parent.find(".error-message").first();
if (pattern.test(element.val())) {
element.removeClass("bad");
element.addClass("success");
error.html("");
return true;
} else {
element.removeClass("success");
element.addClass("bad");
error.html(error_msg);
return false;
}
}
//function to toggle next/submit button based on input values
function showNext() {
var vcount = validationConfig.length;
var acount = 0;
validationConfig.forEach(function (entry) {
var name = fixName(entry.name);
if (validStatus[name] === true) acount++;
});
if (acount == vcount) showNextButton = true;
else showNextButton = false;
if (showNextButton) {
$(".btn-dark").show();
if (surveyButtonBehavior == "disable")
$(".ghl-button, .ghl-next-button, .ghl-mobile-next").attr(
"disabled",
false
);
if (surveyButtonBehavior == "hide")
$(".ghl-button, .ghl-next-button, .ghl-mobile-next").show();
//$(".btn-dark").removeClass('no-validation');
//$(".btn-dark").addClass('yes-validation');
//$(".btn-dark").removeAttr('disabled');
//$(".btn-dark").css("filter","brightness(100%)");
} else {
$(".btn-dark").hide();
if (surveyButtonBehavior == "disable")
$(".ghl-button, .ghl-next-button, .ghl-mobile-next").attr(
"disabled",
true
);
if (surveyButtonBehavior == "hide")
$(".ghl-button, .ghl-next-button, .ghl-mobile-next").hide();
//$(".btn-dark").addClass('no-validation');
//$(".btn-dark").removeClass('yes-validation');
//$(".btn-dark").attr('disabled','true');
//$(".btn-dark").css("filter","brightness(50%)");
}
}
function fixName(query_key) {
value = query_key;
if (__NUXT__.data.surveyData !== undefined) {
__NUXT__.data.surveyData.formData.slides.forEach(function (slide) {
slide.slideData.forEach(function (sdata) {
if (
sdata.fieldKey !== undefined &&
sdata.fieldKey === "contact." + query_key
)
value = sdata.id;
if (
sdata.hiddenFieldQueryKey !== undefined &&
sdata.hiddenFieldQueryKey === query_key
)
value = sdata.id;
});
});
} else {
var nuxtFields = __NUXT__.data.formData.formPayload.form.fields;
nuxtFields.forEach(function (field) {
if (
field.fieldKey !== undefined &&
field.fieldKey == "contact." + query_key
)
value = field.id;
});
}
return value;
}
//document load event
$(document).ready(function () {
//ensure button is hidden
showNext();
//loop through config array of objects.
validationConfig.forEach(function (entry) {
var element_name = fixName(entry.name);
var element = $('input[name="' + element_name + '"]');
var parent = element.parent();
parent.append("<div class='error-message'></div>");
//if config for element requires blur action run this code
if (entry.action == "blur") {
element.blur(function () {
//validate and store validation status to an array
validStatus[element_name] = validate(
element,
entry.regex,
entry.err_msg
);
//update next button status based on currently validated inputs
showNext();
});
}
//if config for element requires keyup action run this code
if (entry.action == "keyup") {
element.keyup(function () {
//validate and store validation status to an array
validStatus[element_name] = validate(
element,
entry.regex,
entry.err_msg
);
//update next button status based on currently validated inputs
showNext();
});
}
});
});
</script>
Few common regex are as follows
Digits
Whole Numbers
/^\d+$/
Decimal Numbers
/^\d*.\d+$/
Whole & Decimal Numbers
/^\d*(.\d+)?$/
Negative, Positive Whole + Decimal Numbers
/^-?\d*(.\d+)?$/
Whole + Decimal + Fractions
/[-]?[0-9]+[,.]?[0-9]<em>([\/][0-9]+[,.]?[0-9]</em>)*/
Alphanumeric Characters
Alphanumeric without space
/^[a-zA-Z0-9]*$/
Alphanumeric with space
/^[a-zA-Z0-9 ]*$/
Password Strength
Complex: Should have 1 lowercase letter, 1 uppercase letter, 1 number, 1 special character and be at least 8 characters long
/(?=(.<em>[0-9]))(?=.</em>[!@#$%^&<em>()\[]{}-_+=~`|:;"'<>,./?])(?=.</em>[a-z])(?=(.<em>[A-Z]))(?=(.</em>)).{8,}/
Moderate: Should have 1 lowercase letter, 1 uppercase letter, 1 number, and be at least 8 characters long
/(?=(.<em>[0-9]))((?=.</em>[A-Za-z0-9])(?=.<em>[A-Z])(?=.</em>[a-z]))^.{8,}$/
Username
Alphanumeric string that may include _ and – having a length of 3 to 16 characters –
/^[a-z0-9_-]{3,16}$/
URL
Include http(s) Protocol
/https?:\/\/(www.)?[-a-zA-Z0-9@:%.<em>+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%</em>+.~#()?&//=]*)/
Protocol Optional
/(https?:\/\/)?(www.)?[-a-zA-Z0-9@:%.<em>+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%</em>+.~#?&//=]*)/
Dates
Date Format YYYY-MM-dd using separator -<br>Date Format dd-MM-YYYY using separators - or . or / Date Format dd-mmm-YYYY using separators - or . or /
/* Date Format YYYY-MM-dd */<br>/([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/
/* Date Format dd-MM-YYYY or<br>dd.MM.YYYY or<br>dd/MM/YYYY<br>with check for leap year */<br>/^(?:(?:31(\/|-|.)(?:0?[13578]|1[02]))|(?:(?:29|30)(\/|-|.)(?:0?[1,3-9]|1[0-2])))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|.)0?2(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))(?:(?:1[6-9]|[2-9]\d)?\d{2})$/
/* Date Format dd-mmm-YYYY or<br>dd/mmm/YYYY or<br>dd.mmm.YYYY */<br>/^(?:(?:31(\/|-|.)(?:0?[13578]|1[02]|(?:Jan|Mar|May|Jul|Aug|Oct|Dec)))|(?:(?:29|30)(\/|-|.)(?:0?[1,3-9]|1[0-2]|(?:Jan|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec))))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|.)(?:0?2|(?:Feb))(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|.)(?:(?:0?[1-9]|(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep))|(?:1[0-2]|(?:Oct|Nov|Dec)))(?:(?:1[6-9]|[2-9]\d)?\d{2})$/
Time
Time Format HH:MM 12-hour, optional leading 0
/^(0?[1-9]|1[0-2]):[0-5][0-9]$/
Time Format HH:MM 12-hour, optional leading 0, Meridiems (AM/PM)
/((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))/
Time Format HH:MM 24-hour with leading 0
/^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/
Time Format HH:MM 24-hour, optional leading 0
/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/
Time Format HH:MM:SS 24-hour
/(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)/
Phone Numbers
International Phone Numbers – with optional country code/extension
/* International Phone Numbers */<br>/^(?:(?:(?(?:00|+)([1-4]\d\d|[1-9]\d?))?)?[-.\ \\/]?)?((?:(?\d{1,})?[-.\ \\/]?){0,})(?:[-.\ \\/]?(?:#|ext.?|extension|x)[-.\ \\/]?(\d+))?$/
