Adding custom validation to form fields


#1

While we’re hoping to get more validation options built in to Unbounce, in the meantime you can use custom JavaScript to add your own validation rules.


How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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.


Here is a template that you can add to the JavaScript section of your page.

  • The ‘field’ variable at the top should be changed to the field ID that you would like to perform validation on

  • The ‘message’ variable should be changed to the validation error message that you would like to show

  • The ‘valid’ variable later on in the script should be changed to an expression that evaluates to true or false based on whether the user’s input passes validation or not

If you need to add more than one custom validation rule per form, you can duplicate the entire script. Just be sure to change the ‘ruleID’ to something else you’ll need to ensure that multiple rules don’t have the same ID.

Examples

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


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


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


Landing page form validation
Email validation to catch typos
Pre filled Text Fields
Number validation for New Zealand
Automatic Rejection to postcodes
Customizable Error Message
[How To] Use A Cookie To Check If The Form Has Been Submitted
Using jQuery to prevent lead form being submitted
[How-to] Change the Input Type on a Mobile Form Field 📱🚀
Phone Number Validation - India
#2

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…


#3

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.


#4

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?


#5

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


#6

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


#7

Thanks, works!!


#8

Johnny, you’re the man!


#9

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


#10

cancelled


#11

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


#12

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


#13

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.


#14

thank you Hristian, now it work!

Best,

J


#15

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?


#16

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


#17

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


#18

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. :slight_smile:


#19

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 />

#20

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