Skip to main content

I integrate with Zoho CRM. The field I’m mapping to inside Zoho CRM is a “Number” field. Purely numbers, no periods, commas, or any symbols.


But there’s a lack of a numbers field in Unbounce. I launched an expensive adwords campaign only to find out that when my leads started putting in numbers as “12,000” or “11.000”, the leads never went to Zoho and it kept a cute little error in the integration field (could have emailed me to let me know this isn’t working)


I don’t see alternatives either. I tried to quickly use the “Phone number” field and removed the validation thinking it won’t validate as phone numbers, but would still validate as numbers. Nope.


Please add a numbers field as now I’m having to remove the field altogether and that’s not what I want to do.

I agree. The lack of the feature surprised me as well. I can understand that there’s no file upload, but this?

Hey Mark/Jurljs - As your already aware, our forms have a limited number of validation options. We are looking to make improvements to our forms in the future, but at the moment there’s no ETA.


In the meantime, i’ve here’s a great workaround that should do exactly what your looking for. This solution was derived from a zipcode validation another customer has graciously provided us. If your looking for zipcode Validation, he’ll be posting his solution on the forum sometime in the near future.


As for digit validation - This solution will restrict the input to digits only, so even decimals or commas will be restricted, which is perfect for Marks scenario.


Here’s how to do it:


Copy and paste the code below into your Javascript box. Be sure to set the placement as ‘head’


 var digitsConfig = { <br />

  rules: { <br />

    required: true, <br />

    digits: true, <br />

    minlength: 6 <br />

  }, <br />

  messages: { <br />

    required: "Number Field is Required", <br />

    digits: "Number Field should be numeric only", <br />

    minlength: "Number Field should at least 6 digits" <br />

  } <br />

}; <br /><br />

window.module.lp.form.datae"validationRules"]i"digit_validation"] = digitsConfig="rules"]; <br />

window.module.lp.form.datae"validationMessages"]t"digit_validation"] = digitsConfig="messages"];

                          <br />

console.log(window.module.lp.form.data); <br /> </script>```   

 

You'll need to make some small modifications to target the field on your form.   

 

Change 'digit\_validation' to the ID of your form field you wish to validate as a digits only. This can be found in the form editor:   

 

(In the example below, it's the grey field named "numbers")   

rhttp://screencast.com/t/xqOFou1O](http://screencast.com/t/xqOFou1O)   

 

Under 'messages' you'll want to cater each message to properly reference your field name.   

 

Also, I left in the minimum length functionality. If you don't wish to have a minimum requirement on your field simply remove the following lines:   

 

minlength: 6   

minlength: "Number Field should at least 6 digits"   

 

I put together a test page with the validation in place:   

 

bhttp://unbouncepages.com/digitsonlyva...](http://unbouncepages.com/digitsonlyvalidation/)   

 

Voila! Pure number validation. Give it a go! but do chime in if you have any issues. I'd be happy to help.

Thanks Johnny, this has worked beautifully. I just hope now that your dev team makes this a priority because what if we have more than one field that requires number validation? 🙂


I’m using this solution right now!

Johnny,

Can we use this Javascript solution on multiple fields on a form. For example for us we have Year and Mileage field, both of them are number only fields. We can users to enter digits in both.

Hey Srinivas - You should be able to modify the script to handle a second field. You’ll want to target specify a new set of validation rules for that second field. Here’s an example where I modified the script above to include a second field with the ID of ‘second_validation’


 var numConfig = { <br />

  rules: { <br />

    required: true, <br />

    minlength: 6, <br />

    maxlength: 15 <br />

  }, <br />

  messages: { <br />

    required: "Number Field is Required", <br />

    minlength: "Number Field should at least 6 digits", <br />

    maxlength: "Field can only have 15 characters" <br />

  } <br />

}; <br /><br />

// Second Validation Rules <br />

var numConfig2 = { <br />

  rules: { <br />

    required: true, <br />

    minlength: 4, <br />

    maxlength: 4 <br />

  }, <br />

  messages: { <br />

    required: "Second Number Field is Required", <br />

    minlength: "Second Number Field should at least 4 digits", <br />

    maxlength: "Field can only have 4 characters" <br />

  } <br />

}; <br /><br />

window.module.lp.form.datao"validationRules"]n"number_validation"] = numConfigu"rules"]; <br />

window.module.lp.form.datao"validationMessages"]s"number_validation"] = numConfigu"messages"];

   <br /><br />

window.module.lp.form.datao"validationRules"]n"second_validation"] = numConfig2m"rules"]; <br />

window.module.lp.form.datao"validationMessages"]s"second_validation"] = numConfig2m"messages"];

 <br /><br />

console.log(window.module.lp.form.data); <br /> </script>```   

 

Tweak the rules and the field IDs to work with your use case. Hope this helps! :)

Hey Srinivas - You should be able to modify the script to apply to more than one field. You’ll want to define a new set of rules for that second field and target its field ID. Here’s an example where I apply a second digit validation for a field named ‘second_field’


 var digitsConfig = { <br />

  rules: { <br />

    required: true, <br />

    digits: true, <br />

    minlength: 6 <br />

  }, <br />

  messages: { <br />

    required: "Number Field is Required", <br />

    digits: "Number Field should be numeric only", <br />

    minlength: "Number Field should at least 6 digits" <br />

  } <br /><br />

}; <br /><br />

//second field rules <br />

var digitsConfig2 = { <br />

  rules: { <br />

    required: true, <br />

    digits: true, <br />

    minlength: 4 <br />

  }, <br />

  messages: { <br />

    required: "Second Number Field is Required", <br />

    digits: "Second Number Field should be numeric only", <br />

    minlength: "Second Number Field should at least 4 digits" <br />

  } <br /><br />

}; <br /><br />

window.module.lp.form.datao"validationRules"]n"digit_validation"] = digitsConfigt"rules"]; <br />

window.module.lp.form.datao"validationMessages"]s"digit_validation"] = digitsConfigt"messages"];

     <br /><br />

window.module.lp.form.datao"validationRules"]n"second_field"] = digitsConfig2s"rules"]; <br />

window.module.lp.form.datao"validationMessages"]s"second_field"] = digitsConfig2s"messages"];

<br /><br />

console.log(window.module.lp.form.data); <br /> </script>```   

 

Be sure to update the rules and field ID for your use case. I've updated the test page to show two fields using number validation:   

 

 http://unbouncepages.com/digitsonlyva...](http://unbouncepages.com/digitsonlyvalidation/)   

 

Hope that helps!

Hi!! how would this work for different form fields (about 7) but the same rules apply.??

Hi! I’m looking for a max number validation, I want to display an error on a form for an age field where the max age allowed is 64, so I want to display an error if people enter 65 as their age. 

Hi Luisa! 

Chiming in on this thread might not be the best way for people to help out. I would suggest posting this as a new ’ Question’ in the Technical and Marketing Strategy categories instead. 

Hi Johnny ! How can I validate to allow only 3 digit number?

10 years later, and still no solution for a basic feature.
#amazing

Hi @Moacir-Percus,

 

Have you checked out this Community thread?:

 

 

I believe that this should help you out.

Reply


Terms & ConditionsCookie settings