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

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

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

Answer 3

Above code won't work because it is missing } after property list.

Answer 4

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 5

You also need to add this additional methods

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.js

Answer 6

I came across similar problem twice recently and spent a lot of time trying to figure it out, so I am going to leave here a simple solution. And if moderator thinks that this is not the right place, just let me know.

The error happens while running this sample code:

$(document).ready(function () {

    $.validator.addMethod("numberEqualTo", function (value, element, parameter) {
        return parseInt(value) === parseInt(parameter);
    }, "Values must match");

    $("#example2").validate({
        focusInvalid: false,
        onkeyup: true,
        onfocusout: true,
        errorElement: "div",
        errorPlacement: function (error, element) {
            error.appendTo("div#errors");
        },
        rules: {
            "example2-fullname": {
                required: true,
                minlength: 5
            },
            "example2-phone": {
                required: true,
                number: true
            },
            "example2-zip": {
                required: true,
                number: true,
                rangelength: [3, 5]
            },
            "example2-value": {
                required: true,
                number: true,
                numberEqualTo: 10
            }
        },
        messages: {
            "example2-fullname": {
                required: "You must enter your full name",
                minlength: "First name must be at least 5 characters long"
            },
            "example2-phone": {
                required: "You must enter your phone number",
                number: "Phone number must contain digits only"
            },
            "example2-zip": {
                required: "You must enter your zip code",
                number: "Zip code must contain digits only",
                rangelength: "Zip code must have between 3 to 5 digits"
            },
            "example2-value": {
                required: "You must enter your value",
                number: "Value must be a digit",
                numberEqualTo: "Value must be equal to 10"
            }
        }
    });
});

Why? For some reason if you specify explicitly:

onkeyup: true,
onfocusout: true,

program will throw the mentioned exception. This is the case when you set ANY or BOTH above options to 'true'. On the other hand if you set BOTH to 'false' or ONE to 'false' and remove the other, it will work as expected.

The most important thing: If you delete or comment out any of these options, the one you removed will be set to default, which is 'true' AND WON"T throw any error. So it is possible to customize validation plugin exactly the way you want, you just need to remember not to set these options to 'true' explicitly.

I hope this will help someone, despite the fact that the actual problem in this question for this particular user has been resolved already.