Adding custom validation to form fields

9 years ago
13 January 2015
112 replies
6577 views

Userlevel 2

Mark_Wainwright
Staff Developer @ Unbounce
91 replies

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

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>

Replace myCustomRule with a unique ID (name) for the rule. You’ll need this later.
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.)
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)

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>

Replace my_form_field with the ID of the form field you want to apply the rule to
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?
Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Show first post Hide first post

112 replies

Page 2 / 5

Hi Guys,

I put that script buth dont fix.

<script>
lp.jQuery(function($) {
         
           // Config
         var ruleID = 'OnlyNumber';
         var field = 'teste1';
         var message = 'Only Number';
         
         var rules = module.lp.form.data.validationRules[field];

          $.validator.addMethod(ruleID, function(value, field) { 
          
         var exp = new RegExp('^[A-za-z0-9]{10,11}$', 'i');
		 return value.match(exp) ? true : false;
        }, message); 
  
  rules[ruleID] = true; 

});
</script>

why?

Tas
Help Centre Strategist @ Unbounce
1 reply
4 years ago
10 April 2020

Hi there Enayet!

Tas from Unbounce Support here - I’m happy to take a look for you 🙂 . Do you mind sharing a link to your landing page and I can see what you have so far?

Here is an example test page of mine with the Postal Code Validation: http://unbouncepages.com/testing-tas-form-validation-email/

To re-cap, you will need to set up two scripts with the placement for both set to “Before End Body Tag”.

If you’re still having issues, just thread here, or reach out to support via support@unbounce.com.

HEllo, Can you send me page file with validate postall code. It will be helpful.
Thank you sir.

I’ve already put in feature requests on solving this… problem is that it’s a valid email without the domain… e.g. test@localhost or employee@companyintranet . so by using html5 email validation these are technically correct although completely useless for a internet only system.

Our solution goes something like:
document.getElementById('email_field_id').setAttribute("pattern", "[a-zA-Z0-9.-_]{1,}@[a-zA-Z0-9.-]{1,}[.]{1}[a-zA-Z0-9]{2,}");

Drop the above into a script and change email_field_id to the id of the email field on your form.

This uses html5 regex pattern matching to use as validation for valid emails (with domain) 😉

Userlevel 5

yes, that would be a good idea.
i still regularly get emails without domain extension

Userlevel 6

Hi @Mark_Wainwright, is it possible to get the email validation script to also validate that the entry includes a “domain extension”? With the current script you can submit emails without .com or similar - in other words invalid emails.

Userlevel 5

Hey @Eline_M !

Did you find a solution to your problem ?

Hi, i’m facing this issue when i run my code below:

<script>
  window.ub.form.customValidators.validacao_telefone = {
    isValid: function(value) {
      /(\(\d{2}\)\s)(\d{4,5}\-\d{4})$/.test(value);
    },

    message: 'Informe um telefone válido',
  };
</script>

“TypeError: window.ub.form is undefined”

My page: http://unbouncepages.com/amildental/

Did you add these to the Script Manager or to each individual landing page’s custom javascript? Thanks!

I have tried the US Zip Code validation script in the original post. It’s not accepting any answer in that field even though I’ve entered a valid zip code.

(before body end tag)

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

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

and also (before body end tag)

 <script>
   window.ub.form.validationRules.zip.usZipCode = true;
 </script>

Any suggestions on getting this to work? Thanks!

I’m in the same boat, if anyone has a way to get US Zip Code validation working I would really appreciate the help!!

The US Zip code Validation is not working, can someone help me?

Userlevel 1

@a.furness
Yep, they need to be added separately!

Hi @felipe_vimcar - I am trying to implement this but the script to block non work email adresses but it doesn’t seem to register. Do the two bits of script need to be added separately? Thanks

Hi, I’m trying to add custom field validation to my form but it’s a multi-step form built with this method (Multi-Field, Multi-Step Form 🔥) and I suspect it doesn’t work because of that… Any input?

Userlevel 1

Hi guys,

Unfortunately, web traffic isn’t always great. Especially when you’re receiving a lot of spam leads. With the following scripts you can at least block non work email addresses.

//Placement: Before Body End Tag

<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()) && /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
  value.toLowerCase());
},

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

and…

//Placement: Before Body End Tag

<script>
  window.ub.form.validationRules.email.nonWebmailEmail = true;
</script>

Ok, seriously, why are we still custom coding form validation for really simple requests, like simply validating something is a number. This is really frustrating.

Secondly, the instructions at the top of this don’t seem to work. Or are confusing enough that they are difficult to implement. This seems pretty straight forward:

<script>
window.module.lp.form.data.validationRules['field_name'].digits = true;
</script>

But no. It isn’t. The instructions don’t tell you where to include it: head, after body, before body, etc. Although that doesn’t matter because I’ve tried them all and it doesn’t work.

Of course, I’ve seen a reference in this thread to JQuery no longer being supported or plans to remove it, so I don’t know if this thread is still valid, except that I chatted with customer support and this is what they pointed me to.

I’m beyond frustrated with this.

Claudia me puedes ayudar a generar un script que valide range de 1 a 500? gracias!

Could you give an example of this for a custom message that displays whenever someone selects a “Yes” radio button in a group and shows no message when someone selects the “No” radio button in the same group.

I’m trying to make give a custom message when someone selects “Yes” for each of 2 separate radio button questions.

Hello,

I was wondering if Unbounce’s decision to remove jQuery from the landing pages would affect the validation scripts shared in this thread.

If Unbounce is removing jQuery from the lp object then what would be their alternative rather than using jQuery’s .validator plugin which is what is currently recommended?

Any further direction would be appreciated.

Thank you

Jon S.

Hi @Hristian

Thanks for getting back to me. Unfortunately I’m a complete noob at coding with Jquery. Is there anyway I could hire a freelancer to do this for me through the unbounce community?

Cheers,
Nico

Userlevel 7

Hi @nico,

You’ll need to modify both of your scripts - the multi-step and the custom validation to work together.

Best,
Hristian

Hi @Hristian,

I’m trying to use the above script to validate two radio buttons on my landing pages form. The radio button options are “YES” and “NO”. I need the lead to click on the “YES” option in order to proceed and successfully click the CTA button, registering with us. However, I’ve tried dozens of variations of the script found on the unbounce community pages but none of them seem to work! I really need some help with this one!!

@Mark_Wainwright Thanks for a great solution, but I found an issue and dont know how to fix it.

Trying to implement this on multistep form (Multi-Field, Multi-Step Form 🔥). But validation pops up right in the beginning (even though the validation field is at the end of the multistep form), without letting me to proceed. could you help me out please 🙂

Thanks!

Hi @Johnny_Opao,

Do you have anything similar for Radio Buttons / Checkboxes? I.e. Can you set the “error message” to be triggered if Option A is selected instead of Option B on a certain checkbox in the form? Thanks, Nico

Page 2 / 5

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

How to Install in Unbounce

Part 1: Define a validation rule

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

Examples

Canadian postal codes

US ZIP codes

Non-webmail email addresses

Reply

Sign up

Log in to the Unbounce Community

Scanning file for viruses.

This file cannot be downloaded