Would be great to be able to specify validation rules for form fields. Right now, you can only specify that a field is required or optional. I would love to be able to put in a regex that would be used to validate what the user enters.
Hello John - yes, we have been discussing a few ways we can improve the usefulness of forms through validation.
We’ll make sure this idea gets into the mix.
JM
Did this ever get added?
EDIT: modified to work with the unannounced change Unbounce has made to its jQuery provision that broke 139 of my forms and cost me half a day and half my hair… a little WARNING next time might be nice…
So I thought I’d share the solution I brewed up. The hard part was figuring out I had to override the submit button’s onclick function. This will run any generic validation function you write (“vForm”) and not let the form submit until it returns true:
lp.jQuery().ready(function() {
var id=window.module.lp.form.data.formButtonId;
// deletes unbounce-added submit function:
lp.jQuery("#"+id).unbind("click");
lp.jQuery("#"+id).click(function(e) {
e.preventDefault();
e.stopPropagation();
if (vForm()) { lp.jQuery("form").submit(); }
}); });
So to make sure it only allows five-digit zip codes in the “zip_code” field, for instance, your vForm() could look like this. It can validate (and update) any number of fields and return false if any fail.
function vForm() {
var Vzip=lp.jQuery("#zip_code").val().replace(/\D/g, "").substr(0,5);
if (Vzip.length != 5 || Vzip=="00000") {
alert("5-digit numeric American ZIP code is required.");
return false;
}
// optional, to update the field with the cleaned value:
lp.jQuery("#zip_code").val(Vzip);
return true; }
Just put both of those in one block, then add it to your form’s Scripts (that button on the toolbar) in the “Head” position.
Reply
Log in to the Unbounce Community
No account yet? Create an account
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.