Forced Field Validation

Hey there,

So the pre-definded Phone Number field has an option to validate based on the country you need.

To validate zip and dob, you will need to add some javascript.

Here is a solution to validate zipcodes.
And you will need to make sure your form field name is “zip_code”

Here is the solution to validate Date of Birth where I’ve just made a few edits to the first zipcode script. You will want to make sure your DOB field name is “date_of_birth”

<script>
lp.jQuery(function() { var ruleID = 'dob' var field = 'date_of_birth'; var message = 'Please enter a date in this format: MM/DD/YYYY'; var rules = module.lp.form.data.validationRules[field]; .validator.addMethod(ruleID, function(value, field) {
var valid = /^([0-9]{2})/([0-9]{2})/([0-9]{4})$/.test(value);
return valid || (!rules.required && !value);
}, message);
rules[ruleID] = true;
});
</script>

Hopefully you feel comfortable adding scripts, let me know if you have some questions 🙂

Sure thing, so I will first answer your last question 😉

There is absolutely a way to duplicate a page. In your page overview within the section titled “A/B Test Center” select the gear dropdown ⚙️ then select “duplicate this variant.”

#1) I’m pretty sure you have it right. As long as the number has a legitimate area code and listing, then it is considered valid. “612)323-8016” may have confusing characters but it is a still a legit phone number sequence.

#2) Field names are shown in the properties tab, but you can’t make the changes there. I have pointed out the area where you can edit field names in the form designer. Once you select the field you wish to edit of course (I just used your screenshot as an example)

Yes, to “Add New Javascript.” I would recommend adding both of these scripts in the same “script” area. So call this new added script “Date of Birth & Zip Code Validation.” Before Body End Tag should work just fine. If you copy and paste those scripts exactly as they are, you should be all set.

Make sure you include both the open and close tags, like this…
<script>
blah blah
date of birth code stuff code stuff in here
</script>
<script>
blah zipcode stuffs in here…
</script>

Then boom, done! Let me know if you get it working!

There is an option to see what your page looks like in the builder.

Look in the top right area of the window for… “👁️ Preview”

That will allow you to see your selected variant before it’s live. But sometimes I’ve noticed scripts that don’t fire off in the preview. It’s always best to test things like this from the live URL. If you need to do that, just add 100% of your traffic to the new variant from the overview page. This way you know you will land on the proper variant to test.

Oh I see,

Perhaps then set up a new “test” page that isn’t tied to anything else like your domain and add that variant to it.
“Unbouncepages.com/my-test-page”

I think there is an option to create a new page from variant or something along those lines to make things easier.

Ah sorry @blynch1712,

When I pasted the dob script here in the community it removes some characters! 😬
I guess that’s why it’s safer to go with github.

Replace the former dob script with this one here.

Sorry, I need some clarification…so you can’t find the page you have been working on in your Unbounce account?

Well I really doubt that it’s gone, unless you consciously selected to delete the page or “discard” the variant and then click again to “delete” the variant.

Let’s start with clarifying the difference between a page and a variant in Unbounce. A single page can have multiple variants in which all the variants point to the same URL, based on the weight you assign them.

Surly, your “SSD Copy” page has the variant that you have been working on within it.

These are pages

These (highlighted) are variants

If you provide the URL to the page you run traffic to, I can look and see what may be going wrong.

Alternatively as a work-around, you could move your “SSD TEST Copy” variant and add it to the page you run traffic to, then point everything to that variant 😉

@blynch1712

Your Date of Birth field name and ID is “dob” and it needs to be “date_of_birth”

Hi Kyle! How can I validate to allow just 3 digit number?

Thanks so much Kyle! I do not what I am doing wrong. It is not working. This is what is showing in the webpage after I add the script.

Thanks Kyele! Somebody from the group pass me a script. It is working great. The script is:

<script>
  
  lp.jQuery(function($) {
  
    var ruleID = 'custom';
    var field = 'number';
    var message = 'Please enter a valid number';
  
    var rules = module.lp.form.data.validationRules[field];
  
    $.validator.addMethod(ruleID, function(value, field) {
  
      var valid = ( /^([2-8][0-9]|9[0-9]|[1-4][0-9]{2}|500)$/.test(value) );
  
      return valid || (!rules.required && !value);
    }, message);
  
    rules[ruleID] = true;
  
  });
</script>

This is great and I just used it. Can you think of a quick way in this format to also verify the age of the individual is at least 21?