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?

You tagged this question with jquery-validation-engine. That's a totally different plugin. Edited. Thanks. — Sparky
– Sparky, Commented Mar 28, 2013 at 15:21

Sparky · Accepted Answer · 2016-08-29 20:32:10Z

23

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.

edited Aug 29, 2016 at 20:32

answered Mar 28, 2013 at 15:18

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anbu Raj Over a year ago

Thanks.Problem in jQuery Validation version. I used jQuery validation version 1.11. I update to jQuery validation version 1.12, now it is working. Thanks once again..

ala Over a year ago

@AnbuRaj, do you have the link where you got 1.12? because the current version of jqueryvalidation.org is 1.11

jonnybot Over a year ago

I had the same problem using 1.11.1 because I didn't have the additional-methods.js file included. Thanks for the thorough answer!

Josh Ribakoff · Accepted Answer · 2014-07-18 00:30:04Z

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

tobylaroni · Accepted Answer · 2015-05-28 22:05:55Z

8

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.

answered May 28, 2015 at 22:05

tobylaroni

8638 silver badges16 bronze badges

Comments

Nimantha · Accepted Answer · 2023-10-31 19:45:47Z

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.

This has absolutely nothing to do with solving the OP's question, and what you describe is specifically mentioned in the documentation: "A boolean true is not a valid value." It's also been asked and answered on SO several times already.

Sparky · Accepted Answer · 2013-03-28 16:06:32Z

0

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

edited Mar 28, 2013 at 16:06

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered Mar 28, 2013 at 11:05

karthick

6,18812 gold badges54 silver badges92 bronze badges

1 Comment

Sparky Over a year ago

Please refrain from "text-speak". Proper grammar and spelling is expected. Edited. Thanks.

Mina Marcos · Accepted Answer · 2015-05-08 15:47:59Z

-2

You also need to add this additional methods

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

answered May 8, 2015 at 15:47

Mina Marcos

291 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

1 Comment

1 Comment

Comments

Linked

Related