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

  });

Thanks in advance. How to solve this?

Answer 1

As a related bug, if you add a custom rule, using:

$.validator.addMethod('field-is-valid', function (val, element) { ...})

but then reference it in your rules declaration with the wrong name:

$(element).rules('add', {
    "field-valid": true
})

you'll get the same Cannot call method call of undefined.

Answer 2

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.

Answer 3

I had the same problem, but with a different cause. The same problem happens when I put a rule "require:true" instead of "required:true".

This error happens when you specify in your rules a validation that has no corresponding method. Through debugging I found that the exception is showing I specified a rule "require" by the method name was "required". It attempts to access a method within a hashmap, and tries to .call() even if the method is not found, which results in an exception.

If the plugin author simply threw a custom error in this case that stated "The rule 'require' has no method" it would be easier to debug & recognize the typo.

This is also the same cause of the infamous problem with the plugin submitting even though fields are invalid. See & vote for my issue report - https://github.com/jzaefferer/jquery-validation/issues/1212