Regex validation of form fields

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

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.