How to validate CPF number using custom method in jQuery.validate plugin

Last week, I polished the subscription process of an app that I’m currently working on for better validation and more friendly UI/UX.

During the subscription this form collects a non-confidential CPF number, which is the Brazilian analog of SIN (Canada) or SSN (USA). This information is critical to be verified upfront, so it’s required to be checked during subscription process, on a client side.

The entire subscription form is being validated by jQuery.Validate plugin, which has many of options for verification, such as digits only, min/max number of characters or even built-in methods for credit card validation.

Certainly, this plugin doesn’t have a built-in method for CPF number validation, since it’s very rarely needed. So I decided to write a custom method for its validation.

To add any custom method into jQuery.validate plugin you need to declare it first right after the DOM is loaded:

 $(document).ready(function() {
   $.validator.addMethod("validateCPF", function (value) {

        // here goes your algorithm code

   }, 'Please provide a valid CPF number');
 });

You have to give your custom method a unique name – “validateCPF” in our case.
You pass some data into the function to validate – “(value)”. In our case, we pass a string that user enters into the input field.
You can provide a default message, which will be shown, in case the data is false – “Please provide a valid CPF number”.
Also, your function has to return true or false to work as a proper custom method inside jQuery.validate plugin.

After you declared this method, it becomes available to be used among other “rules” of the plugin. So you simply add a rule with the name of the plugin, like this:

 $("#subscriptionForm").validate({
   rules: {
     'numCPF': {
       required:  true,
       validateCPF: true
      }
   }
 });

Pretty straightforward, right?

Now, to the CPF number algorithm itself. Different numbers use different algorithms in order to determine if they’re valid or not. That is not a private information, and is being used to avoid accidental typing errors, which are not rare when users deal with long numbers, like social insurance or credit card numbers.

For example, in Canadian SIN number, they use “Luhn algorithm”, which is the same algorithm that is being used for credit card numbers validation. In Brazilian CPF number, the algorithm is different: its last 2 digits serve as “check numbers” to verify the first 9 numbers. You can check out my gist for the CPF number validation:

As usual, here is a couple of links worth checking:

Nadine

Get notified of new posts

SaaS Developer
About Testimonials Contact

How to validate CPF number using custom method in jQuery.validate plugin

Nadine

Get notified of new posts

SaaS Developer About Testimonials Contact

How to validate CPF number using custom method in jQuery.validate plugin

Related Posts

✨ Awesome news about Paper Audio Player

✨ Dribbble Profile v2.0 with one line of code

✨ Paper audio player made with Polymer 1.0

SaaS Developer
About Testimonials Contact