Skip to main content

community


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 /^(ra-zA-Z]\d[a-zA-z]\s?\dza-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}(n\-]?\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

Yup, I’m positive. Here’s the screenshot (added to this popup, then saved and published):

image
image1731×684 48.7 KB

@ArtZ Does the script work in “preview” mode in the Unbounce builder?

Hi Kyle. Yup, surprisingly it does work in the preview mode.

@ArtZ Well in that case, I have no idea what’s going on haha!

Sounds like a good case for the Unbounce support team.

The digit validation doesn’t seem to be working 😕

Digits only isn’t working. Any help?

I only have a very basic knowledge of javascript. How can I get this script to validate a radio button? (If ‘No’ option is checked, an alert message appears)

Bumping this.


Would really like to know how to show a custom alert if a specific radio button is checked!

I am running into issue with the business email validation code and not sure if anyone can help me. Currently I have 3 javascripts set up for this page: https://m.jobtarget.com/safeguard-your-business-from-compliance-violations-b/

I also created an additional 2 more javascripts for the business email validation. The first has this code:

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

The second file has the following:

<script>
  window.ub.form.validationRules.lp-pom-form-16.nonWebmailEmail = true;
</script>

Lp-pom-form-16 is the ID for our form on this page. I was wondering what I was doing wrong as I am able to put my personal gmail address in and it does not block it?

@k.colvin 

In your second script, make sure that you’re targeting the correct field. 

From what I see in your script:

<script>
  window.ub.form.validationRules.lp-pom-form-16.nonWebmailEmail = true;
</script>
 

 

it looks like you may be targeting a larger section than just the email field. Click into your form editor and look for what your form field ID is. This is what it is by default, but you may have edited yours:

 

 

Using the default example, the second code should look like this:

 

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

 

Try that out and let me know if you have any questions!

Hi

I’m trying to add a validation message if a certain (hidden) field has a value lower then 5. The value in the hidden field is set automatically if visitors select a picture on my page. The hidden field is ‘havebook’. I read the all above posts and tried to compose a code, but unfortunately it doesn’t work. 

Can anyone help me, please?

 

<script>
  
  lp.jQuery(function($) {
  
    var ruleID = 'custom';
    var field = 'havebook';
    var message = 'Select minimum 5 books';
  
    var rules = module.lp.form.data.validationRulesffield];
  
    $.validator.addMethod(ruleID, function(value, field) {
  
      var valid = ( /value >= 5) );
  
      return valid || (!rules.required && !value);
    }, message);
  
    rulesruleID] = true;
  
  });

</script>
 

For anyone who comes across this thread, we recently added a similar option while you’re editing your forms within the builder directly. Check it out here!

Reply


Terms & ConditionsCookie settings