Trouble adding custom validation on a Form field of a Lightbox/Modal

Hey everyone!

So, I am really new to Unbounce and I’m facing an issue with custom form field validation. My team is developing 4 pages, and we have forms in all of them. I made the validation work in 3 of them, but one of the pages has its form in a Modal/Lightbox and I just can’t make it work. I’ll post bellow my code (both the code and the form fields are exactly the same on all pages), and the steps I already tried:



var ruleID = ‘telefoneCheck’;
var field = ‘telefone’;
var message = ‘Telefone invalido!’;

var rules =[field];

$.validator.addMethod(ruleID, function(value,field){
value = value.replace("(","");
value = value.replace(")", “”);
value = value.replace("-", “”);
value = value.replace(" ", “”).trim();
if(value.length < 10)
return false;

if(["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10"].indexOf(value.substring(0, 2)) != -1)
  return false;

return true;

}, message);

rules[ruleID] = true;

The result of this code is “lp is not defined”;

What I’ve tried:

  • change the first line to $(document).ready instead of lp.jQuery and change module.lp[…] to window.ub.form[…] => Its runs the script, but it says “can’t read proprety addMethod of undefined”

  • manualy link the jQuery Validator plugin in the head tag, with a suported jQuery version => it runs and if I console log the form says the rule is applied (like this: ‘rule:true’ ), but the rule does nothing, its like the rule function is not implemented;

  • I also tried all of the above applying the JS both directly in the modal/lightbox variant and in the main page variant. The errors mentioned above are from applying the JS directly to modal/lightbox variant.

If anyone can help, I thank you a lot!