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

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

像这样:

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

另外,请在呈现的HTML中检查您的表单ID是否正确.

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

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

Answer 3

对于仍在寻找答案的人,上面的答案都不起作用..

我花了最后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页面中不再一次包含脚本,同时确保主页面上的元素仍具有唯一的名称.

希望这可以帮助.