jQuery validator - Cannot call method 'call' of undefined error - while adding validation dynamically

Question

This is my code to update the jQuery validation dynamically. In document load i create the validation. This code is used to update the phone number validation dynamically. After apply this validation, when i enter anything in phone number text box i get cannot call method 'call' of undefined error.

 $("#phone").rules("remove");

$("#phone")
  .rules(
  "add",
  {
    required:true,
    minlength:5,
    maxlength:20,
    phoneUS:true,
    messages:{
    required: "Enter company phone number",
    minlength:"Phone number should contain a minimum of 5  characters",
    maxlength:"Phone number should contain a maximum of 20  characters",
    phoneUS:"Enter valid phone number"
  }

  });

How to solve this?

Answer 1

There are four potential problems.

1) You're missing a closing brace for the messages section.

$("#phone").rules("add", {
    required: true,
    phoneUS: true,
    messages: {
        required: "Enter company phone number",
        phoneUS: "Enter valid phone number"
    } //<-- this was missing 
});

DEMO: http://jsfiddle.net/A8HQU/2

2) There is a known bug where adding messages using the rules('add') method breaks the plugin and/or rule. Make absolutely sure you are including jQuery Validate version 1.11.1 or better.

3) The phoneUS rule requires the inclusion of the additional-methods.js file.

4) The rules('add') method must come after the .validate() initialization function.

Note:

You're using the phoneUS rule, so minlength and maxlength are totally superfluous since the phoneUS rule is already looking for a precise format/length.