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.