jQuery验证插件错误：TypeError：验证程序未定义

Here is html code for the form:

这是表单的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>

and here is the code that I used for validation:

这是我用于验证的代码：

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

In the console following error is logged:

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

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

What could be the issue here?

这可能是什么问题？

12 个解决方案

#1

This error happened because I had another html element with same id. After removing that id code worked fine.

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

#2

You need to include the validation script in the head of your document.

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

Like this:

喜欢这个：

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

Also, please check in the rendered HTML that your form ID is correct.

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

I use this code for calling validate on my sites

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

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

#3

For anyone still looking for an answer and the answers above dont work..

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

I spent the last 3 hours trying all the solution and none of them worked.

我花了最后3个小时尝试所有解决方案，但没有一个能够工作。

I finally realized a very stupid mistake , I had initialized Jquery twice in my application

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

once in the head where i had included 3 scripts

曾经在我已经包含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>

and once again at the end of the page where i only had the line.

再次在页面的末尾，我只有这条线。

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

This was resetting the validator function of $ and causing everything to break.

这正在重置$的验证器函数并导致所有内容中断。

Some things to check for cases where validations are not firing.

有些事情需要检查验证未触发的情况。

1. Is the script in correct order ? jquery followed by validate followed by unobstrusive.

   脚本的顺序是否正确？ jquery后跟验证，然后是不引人注意的。

2. Is the $.validator function defined ? Check quickly in the console of the browser

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

3. Is the form to be validated being created dynamically ? If so , you may need to re initialize the validator plugin on the form , the best way i have found of doing this are mentioned below , choose the one which fits well for you.

   要动态创建要验证的表单吗？如果是这样，你可能需要重新初始化表单上的验证器插件，我发现这样做的最佳方法如下所述，选择适合你的那个。

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

or

要么

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

or

要么

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

4. If you have complicated ajax loads for many forms , make sure that the scripts are not included again and again in each ajax page , also make sure that elements on the main page still have unique names.
5. 如果许多表单都有复杂的ajax加载，请确保在每个ajax页面中不再一次包含脚本，同时确保主页面上的元素仍具有唯一的名称。

Hope this helps.

希望这可以帮助。

#4

The same issue showed up for me. The reason for that error what that I was using the code:

同样的问题出现在我面前。出现错误的原因是我使用的代码是什么：

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

And the id of the form element was not valid

并且表单元素的id无效

#5

In my case the problem came that had two instanced versions of Jquery UI i JQuery. This made that Jquery normal code works fine but delete the intance of $.validator.

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

#6

In my case the error was because the validator was being called too early. I moved the code to a seperate function and called it using delay method of underscore.js. Worked like a charm.

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

_.delay(doValidations);

function doValidations() {
...
});

#7

I had @Scripts.Render("~/bundles/jquery") in the parent view (_Layout.cshtml) and had also defined some other jquery Script tags in another view, they *ed.

我在父视图（_Layout.cshtml）中有@ Scripts.Render（“〜/ bundles / jquery”），并在另一个视图中定义了一些其他jquery脚本标记，它们发生了冲突。

#8

Because this is the first topic that Google shows for "validator is undefined" then I will describe my solved problem, maybe someone will find it helpfull.

因为这是Google为“验证器未定义”而显示的第一个主题，然后我将描述我已解决的问题，也许有人会发现它有用。

I was using 'maxlength' attribute (nothing fancy) and I got this error. The reason was nested forms. One of the textarea was inside both forms. Can happen when you have modals (dialogs) with forms in main view.

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

#9

The plugin comes in separate libraries, you need to include those in your html.

该插件位于不同的库中，您需要在html中包含这些库。

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

#10

Same happened here. For me it was a typo in my code:

同样发生在这里。对我来说，这是我的代码中的拼写错误：

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

#11

This issue was occurring for me when calling validator.destroy() - the error was occurring within the staticRules method of the plugin. The cause turned out to be the associated form element (element.form) was detached from the DOM. I resolved it by checking the element was in the DOM before calling destroy, using the following method:

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

document.contains(element)

Hopefully this helps someone.

希望这有助于某人。

#12

In my case I was calling $.validator before $(document).ready. Once I moved it to a function being called from ready, it worked. It will work after or during ready but not before.

在我的情况下，我在$（document）.ready之前调用$ .validator。一旦我将它移动到从准备好调用的函数，它就可以工作了。它会在准备好之后或之间工作，但不会之前。