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

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.