jquery - jQuery验证器 - 无法调用未定义错误的方法“调用” - 同时动态添加验证

Question

这是我动态更新 jQuery 验证的代码。在文档加载中，我创建了验证。此代码用于动态更新电话号码验证。应用此验证后，当我在电话号码文本框中输入任何内容时，我得到无法调用未定义错误的方法“调用”。

 $("#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"
  }

  });

提前致谢。如何解决这个问题？

Answer 1

有四个潜在的问题。

1）您缺少该messages部分的右括号。

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

演示：http: //jsfiddle.net/A8HQU/2

2) 存在一个已知错误，messages使用该rules('add')方法添加会破坏插件和/或规则。确保您包含jQuery Validate 版本 1.11.1或更高版本。

3)phoneUS规则要求包含additional-methods.js文件。

4)rules('add')方法必须在.validate()初始化函数之后。

注意：

您正在使用该phoneUS规则，因此minlength完全maxlength是多余的，因为该phoneUS规则已经在寻找精确的格式/长度。

Answer 2

我有同样的问题，但原因不同。当我设置规则“re​​quire：true”而不是“required：true”时，也会发生同样的问题。

当您在规则中指定没有相应方法的验证时，会发生此错误。通过调试我发现异常显示我通过方法名称指定了一个规则“re​​quire”是“required”。它尝试访问 hashmap 中的方法，并尝试 .call() 即使没有找到该方法，这会导致异常。

如果插件作者在这种情况下简单地抛出一个自定义错误，指出“规则'要求'没有方法”，那么调试和识别错字会更容易。

即使字段无效，这也是插件提交臭名昭著的问题的相同原因。查看并为我的问题报告投票 - https://github.com/jzaefferer/jquery-validation/issues/1212

Answer 3

作为一个相关的错误，如果您添加自定义规则，请使用：

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

但随后在您的规则声明中使用错误的名称引用它：

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

你会得到同样的结果Cannot call method call of undefined。

Answer 4

我最近两次遇到了类似的问题，并且花了很多时间试图弄清楚，所以我将在这里留下一个简单的解决方案。如果版主认为这不是正确的地方，请告诉我。

运行此示例代码时发生错误：

$(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"
            }
        }
    });
});

为什么？出于某种原因，如果您明确指定：

onkeyup: true,
onfocusout: true,

程序将抛出上述异常。当您将以上选项中的任何一个或两个都设置为“真”时，就会出现这种情况。另一方面，如果您将 BOTH 设置为 'false' 或 ONE 设置为 'false' 并删除另一个，它将按预期工作。

最重要的是：如果您删除或注释掉这些选项中的任何一个，您删除的选项将被设置为默认值，即“真”并且不会抛出任何错误。因此可以完全按照这种方式自定义验证插件您需要，您只需要记住不要将这些选项明确设置为“真”。

我希望这会对某人有所帮助，尽管这个特定用户在这个问题中的实际问题已经得到解决。

Answer 5

上面的代码不起作用，因为它}在属性列表之后丢失。

Answer 6

您还需要添加此附加方法

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