jQuery 验证插件错误：TypeError: 验证器未定义

Question

这是表单的html代码：

<form method="post" id="login" action="/login">
 <div class="login-element">
    <label for="email">E-Mail</label>
    <input type="text" name="email">
</div>
<div class="login-element">
    <label for="password">Passwort</label>
    <input type="password"  name="password">
</div>
<div class="login-element">
    <input type="submit" value="Login">
</div>
</form>

这是我用于验证的代码：

    $(document).ready(function() { 
    $("#login").validate({
       debug: true,
       rules: {
            email: {
              required: true,
              email: true
            },
            password: {
              required: true
            }
        },
        messages: {
            email: {
                required: "Please enter a email adress",
                email: "Please enter a valid email address"
            },
            password:"Please enter password"
        }
    });
    });

在控制台中记录以下错误：

TypeError: validator is undefined
...or.settings[eventType] && validator.settings[eventType].call(validator, this[0],...

这里可能是什么问题？

Answer 1

发生此错误是因为我有另一个具有相同 ID 的 html 元素。 删除该 ID 代码后工作正常。

Answer 2

对于任何仍在寻找答案的人来说，上面的答案都不起作用..

我花了最后 3 个小时尝试所有解决方案，但没有一个奏效。

我终于意识到一个非常愚蠢的错误，我在我的应用程序中初始化了两次 Jquery

曾经在我的脑海中包含了 3 个脚本

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

再次在我只有一行的页面末尾。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

这是重置 $ 的验证器功能并导致一切中断。

检查未触发验证的情况的一些事项。

1. 脚本的顺序是否正确？ jquery 其次是验证，然后是不引人注目的。

2. 是否定义了 $.validator 函数？ 在浏览器的控制台中快速查看

3. 要验证的表单是动态创建的吗？ 如果是这样，您可能需要重新初始化表单上的验证器插件，下面提到了我发现的最佳方法，选择最适合您的方法。

    $.validator.unobstrusive.parse('#myForm')

要么

 $('#myForm').validate() // this just makes the validator plugin consider the form for unobstrusive validation

要么

$('#myForm').valid() // this will trigger unobstrusive validation on the form.

4. 如果您有多种表单的复杂ajax 加载，请确保脚本不会一次又一次地包含在每个ajax 页面中，还要确保主页上的元素仍然具有唯一的名称。

希望这可以帮助。

Answer 3

您需要在文档的头部包含验证脚本。

像这样：

<script src="/js/libs/jquery.validate.js" type="text/javascript"></script>

另外，请检查您的表单 ID 是否正确呈现的 HTML。

我使用此代码在我的网站上调用验证

        //Validate Form
        var ids = [];
        $("form").each(function () {
            ids.push(this.id);
        });
        var formId = "#" + ids[0]
        $(formId).validate();

Answer 4

同样的问题出现在我身上。 该错误的原因是我使用的代码：

if ($("#invalidFormId").valid()) {
....
}

并且form元素的id无效

Answer 5

在我的情况下，错误是因为验证器被调用得太早了。 我将代码移到一个单独的函数中，并使用 underscore.js 的延迟方法调用它。 像魅力一样工作。

_.delay(doValidations);

function doValidations() {
...
});

Answer 6

因为这是谷歌为“验证器未定义”显示的第一个主题，所以我将描述我解决的问题，也许有人会发现它有帮助。

我正在使用 'maxlength' 属性（没什么特别的），但我收到了这个错误。 原因是嵌套表单。 textarea 之一在两种形式中。 当您在主视图中有带有表单的模态（对话框）时可能会发生这种情况。

Answer 7

在我的情况下，问题出现了两个实例化版本的 Jquery UI i JQuery。 这使得 Jquery 正常代码工作正常，但删除了 $.validator 的实例。

Answer 8

我在父视图 (_Layout.cshtml) 中有@Scripts.Render("~/bundles/jquery")并且还在另一个视图中定义了一些其他 jquery Script 标签，它们发生了冲突。

Answer 9

该插件来自单独的库，您需要将它们包含在您的 html 中。

<script src="../jquery-validation/dist/jquery-validate.min.js"></script>
<script src="../jquery-validation/dist/additional-methods.min.js"></script>

Answer 10

这里也发生了同样的事情。 对我来说，这是我的代码中的一个错字：

$(document).ready(function(){
    //START of validate
$('#reply').validate({
    rules:{
        message:{
            required: true,
            },  
        },
    submitHandler: function(form) {
        var data = $("#reply").serialize();
        $.ajax({
            type:"POST",
            url:"ajax/scripts/msg_crt.php",
            data:data,
            success:function(data){
                alert("Loaded");
                }
            });
        }
    });
    //END of validate
  });

$(document).on('click','#send', function(){
    if($('#replay').valid()){// <--- Here is my selector typo
        $("#replay").submit(); // <--- Here is my selector typo
        }
        return false;
    });

Answer 11

这个问题是在调用 validator.destroy() 时发生的 - 错误发生在插件的 staticRules 方法中。 原因原来是关联的表单元素 (element.form) 与 DOM 分离。 我通过在调用 destroy 之前检查元素是否在 DOM 中来解决它，使用以下方法：

document.contains(element)

希望这有助于某人。

Answer 12

就我而言，我在$(document).ready之前调用$.validator $(document).ready 。 一旦我将它移到一个从ready调用的函数，它就起作用了。 它将在ready之后或期间工作，但不能在此之前工作。

Answer 13

我的<input>元素中有form="form-name属性。删除它立即解决了错误。