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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15678839/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:34:09  来源:igfitidea点击:

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

jqueryjquery-validate

提问by Anbu Raj

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.

这是我动态更新 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"
  }

  });

Thanks in advance. How to solve this?

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

回答by Sparky

There are four potential problems.

有四个潜在的问题。

1) You're missing a closing brace for the messagessection.

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

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

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

2) There is a known bugwhere adding messagesusing the rules('add')method breaks the plugin and/or rule. Make absolutely sure you are including jQuery Validate version 1.11.1or better.

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

3) The phoneUSrule requires the inclusion of the additional-methods.jsfile.

3)该phoneUS规则要求列入additional-methods.js文件

4) The rules('add')method must come afterthe .validate()initialization function.

4)rules('add')方法必须来到之后.validate()初始化功能。

Note:

注意

You're using the phoneUSrule, so minlengthand maxlengthare totally superfluous since the phoneUSrule is already looking for a precise format/length.

您正在使用的phoneUS规则,所以minlengthmaxlength是完全多余的,因为phoneUS规则已经在寻找一个精确的格式/长度。

回答by Josh Ribakoff

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

我遇到了同样的问题,但原因不同。当我放置规则“re​​quire:true”而不是“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.

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

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

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

回答by tobylaroni

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.

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

回答by rvnlord

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.

程序将抛出上述异常。当您将以上选项的 ANY 或 BOTH 设置为 'true' 时就是这种情况。另一方面,如果您将 BOTH 设置为 'false' 或 ONE 设置为 'false' 并删除另一个,它将按预期工作。

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.

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

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

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

回答by karthick

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

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