Adding custom validation to form fields


Userlevel 2

If you want to add more specific form validation rules, you can do that using custom JavaScript!


How to Install in Unbounce

Click Here for Instructions

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Part 1: Define a validation rule

  1. Copy the following script and paste it into the Javascripts section of the builder:

    <script>
      window.ub.form.customValidators.myCustomRule = {
        isValid: function(value) {
          return value === 'I accept';
        },
    
        message: 'Your entry is invalid',
      };
    </script>
    
  2. Replace myCustomRule with a unique ID (name) for the rule. You’ll need this later.

  3. Replace isValid with a function that takes the value as an argument and returns true if the value passes validation, or false if not. (The above example requires the user to enter ‘I accept’ exactly.)

  4. Replace message with the error message that you would like to show when the user’s input does not match (optional)

Part 2: Apply the rule to form field(s)

  1. Copy the following script and paste it into the Javascripts section of the builder:

    <script>
      window.ub.form.validationRules.my_form_field.myCustomRule = true;
    </script>
    
  2. Replace my_form_field with the ID of the form field you want to apply the rule to

  3. Replace myCustomRule with the rule ID you set when defining the rule above

This part of the script can be repeated if you would like to apply the same validation rule to multiple form fields.

Examples

Here are some examples of validations that this can be used to create:

Canadian postal codes

<script>
  window.ub.form.customValidators.canadianPostalCode = {
    isValid: function(value) {
      return /^([a-zA-Z]\d[a-zA-z]\s?\d[a-zA-Z]\d)$/.test(value);
    },

    message: 'Please enter a valid Canadian postal code',
  };
</script>

US ZIP codes

<script>
  window.ub.form.customValidators.usZipCode = {
    isValid: function(value) {
      return /^\d{5}([\-]?\d{4})?$/.test(value);
    },

    message: 'Please enter a valid US ZIP code',
  };
</script>

Non-webmail email addresses

<script>
  window.ub.form.customValidators.nonWebmailEmail = {
    isValid: function(value) {
      return /\@(?!(me|mac|icloud|gmail|googlemail|hotmail|live|msn|outlook|yahoo|ymail|aol)\.)/.test(value.toLowerCase());
    },

    message: 'Please enter your work email address',
  };
</script>

Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


111 replies

Userlevel 3

Here’s a couple others

Digits only
https://gist.github.com/johnnyopao/51…

Currency up to two decimals (ex: 45.50)
https://gist.github.com/johnnyopao/86…

Confirm email
https://gist.github.com/johnnyopao/c9…

In the example above, how would I change “I Accept” to check another field for matching information (i.e. email confirm field). I already added another field var, but can’t seem to get the snytax right to replace 'I Accept". Thanks.

Userlevel 3

Hey Hayley - Sorry i’m a bit confused as to what you’re trying to do.

Did you want to check if another field to see if it was filled out? Or you want this field field to match the exact value as another field? Or something else completely?

We want the two field to match exactly. We have an “email” field and then a “confirm email” field. So the custom validation needs to “match the exact value as another field”. Does that make sense?

email field 1 == email field 2

Userlevel 3

Thanks for clarifying Hayley

As this is something I can see asked for more frequently, I whipped up a validation myself

https://gist.github.com/johnnyopao/c9965db11cded79aede6

Be sure to update the IDs with your own email fields

Thanks, works!!

Johnny, you’re the man!

Hi Johnny,

I tried to use your script to validate the field ‘cod_fisc’ in my form, which must be an alphanumeric string as follows:
[6 letters] [2 numbers] [1 letter] [2 numbers] [1 letter] [3 numbers] [1 letter]

below my script:

however, it does not function. Where am I wrong?

thanks for your help

cancelled

Userlevel 7
Badge +3

Hi Joe, 

I just checked your RegEx with this tool and it seems to be working as intended. 

![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1328514/RackMultipart20151214-14187-obpi08-Online_regex_tester_and_debugger JavaScript Python PHP and_PCRE_inline.png?1450078755 “Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1328514/RackMultipart20151214-14187-obpi08-Online_regex_tester_and_debugger__JavaScript__Python__PHP__and_PCRE_inline.png?1450078755”)

Have you tried closing it with parentheses on both ends (). 

![](https://d2r1vs3d9006ap.cloudfront.net/s3_images/1328515/RackMultipart20151214-26309-jc3rnz-This_validates_a_field_for_currency_for_dollar_and_cents Ex 42_50___GitHub_inline.png?1450078768 “Image: https://d2r1vs3d9006ap.cloudfront.net/s3_images/1328515/RackMultipart20151214-26309-jc3rnz-This_validates_a_field_for_currency_for_dollar_and_cents__Ex__42_50___GitHub_inline.png?1450078768”)

That’s the only thing I can spot out of place with the original script example. 

Best,
Hristian

Hi Hristian,

I tried closing it with parentheses on both ends as you suggest, but still does not work

any other suggestions?

thanks for your time

J

Userlevel 7
Badge +3

Hi Joe, 

It turns out you need the () parentheses but also to wrap the RegEx in slashes / /.

I just tested it on this page and it seems to work: http://unbouncepages.com/custom-validation-test/

Here is the exact script:

&nbsp;&nbsp;<br />&nbsp; lp.jQuery(function($) {<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; var ruleID = 'custom';<br />&nbsp; &nbsp; var field = 'validation_rule_test';<br />&nbsp; &nbsp; var message = 'Please enter a valid number';<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; var rules = module.lp.form.data.validationRules[field];<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; $.validator.addMethod(ruleID, function(value, field) {<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; var valid = ( /[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[[a-zA-Z][0-9]{3}[a-zA-Z]/.test(value) );<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; return valid || (!rules.required && !value);<br />&nbsp; &nbsp; }, message);<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; rules[ruleID] = true;<br />&nbsp;&nbsp;<br />&nbsp; });<br />

If you make the above changes, it should work. 

Best,
Hristian

P.S. Make sure you adjust the ruleID, field and message.

thank you Hristian, now it work!

Best,

J

Userlevel 7
Badge +4

Hi, my client would like to modify this so that it validates an age entered into a text field, to confirm that the visitor is over a certain age. How can they do that?

Userlevel 7
Badge +3

Hi Nicholas, 

You just need to write a valid regex expression for whatever age range you want to validate against (ex. 18-99, 21-35, 19-66, etc.)

What’s your minimum and maximum allowed age?

Best,
Hristian

Userlevel 7
Badge +4

Hey, thanks Hristian! The age range is just 18 and older. Do you know what the exact expression would be for that?

Userlevel 7
Badge +3

Hey Nicholas, 

My regex expressions are a bit rusty but this should work (just make sure you test it):

(1[89]|[2-9]\d)

Best,
Hristian

EDIT: That is unless you are expecting leads older than 99 years. 🙂

Userlevel 7
Badge +4

Do you mind showing me where to plug this in? I’m using the script you posted above as a starting point, but I need to modify it to add in the regex you created.

&nbsp;&nbsp;<br /></pre><pre>&nbsp; lp.jQuery(function($) {<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; var ruleID = 'custom';<br />&nbsp; &nbsp; var field = 'validation_rule_test';<br />&nbsp; &nbsp; var message = 'Please enter a valid number';<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; var rules = module.lp.form.data.validationRules[field];<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; $.validator.addMethod(ruleID, function(value, field) {<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; var valid = ( /[a-zA-Z]{6}[0-9]{2}[a-zA-Z][0-9]{2}[[a-zA-Z][0-9]{3}[a-zA-Z]/.test(value) );<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; &nbsp; return valid || (!rules.required && !value);<br />&nbsp; &nbsp; }, message);<br />&nbsp;&nbsp;<br />&nbsp; &nbsp; rules[ruleID] = true;<br />&nbsp;&nbsp;<br />&nbsp; });<br />
Userlevel 7
Badge +3

Make sure you change the “var field” & “var message” to reflect what you want.

Userlevel 7
Badge +4

Worked like a charm! I can’t thank you enough, Hristian!

How would this work for multiple checkboxes to validate that at least one checkbox must be selected?

Userlevel 2
Badge +1

Hey Johnny,
I tried using the code below for a Full Name validation in a single input field with a space between the texts. But for some reasons I couldn’t make it work! Will you please kindly have a look at it?

This is the code:

And this is my landing page: http://unbouncepages.com/pradaxa-one/

Thanks.

Userlevel 3

Hey Nayon

It looks to be working for me

I assume you got it figured out, but let me know if you’re still having issues with it

Userlevel 2
Badge +1

Yeah, It works fine now. actually I updated the script!

How could I modify this script to target a hidden field? I’m able to get it working on visible fields, but not hidden.

Specifically, I’m trying to create a blank field (honeypot) to stop bot traffic from submitting forms. The value of the hidden field should remain blank. If it is not blank, the form will not submit.

Thanks

Reply