javascript - jQuery Validation : $. data($ ('form' )[0], 'validator' ).settings 返回 undefined

Question

我有一个 ASP.Net MVC 项目，我正在使用不显眼的 jQuery 验证。 要在元素失去焦点时添加验证，我正在调用

$(document).ready(function () {
    // enable validation when an input loses focus.
    var settngs = $.data($('form')[0], 'validator').settings;
    settngs.onfocusout = function (element) { $(element).valid(); };
});

这是在一个项目上工作，而在另一个项目上抛出此异常，因为 $.data($('form')[0], 'validator') 返回未定义的 ($.data($('form')[ 0]) 返回一个空对象):

Uncaught TypeError: Cannot read property 'settings' of undefined

但是，当提交按钮被按下时，jQuery Validation 工作正常，所以其他一切都应该正确设置。

我在 body 标记的末尾加载这些脚本:(上面列出的函数在 customvalidations.js 中，因此它应该在验证器应用于表单后执行)

<script src="/Staffing/Scripts/jquery-2.1.1.js"></script>
<script src="/Staffing/Scripts/globalize/globalize.js"></script>
<script src="/Staffing/Scripts/globalize/cultures/globalize.culture.de-DE.js"></script>
<script src="/Staffing/Scripts/bootstrap.js"></script>
<script src="/Staffing/Scripts/respond.js"></script>
<script src="/Staffing/Scripts/bootstrap-datepicker.js"></script>
<script src="/Staffing/Scripts/bootstrap-datepicker-globalize.js"></script>
<script src="/Staffing/Scripts/locales/bootstrap-datepicker.de.js"></script>
<script src="/Staffing/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Staffing/Scripts/jquery.validate.js"></script>
<script src="/Staffing/Scripts/jquery.validate.globalize.js"></script>
<script src="/Staffing/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Staffing/Scripts/localization/messages_de.js"></script>
<script src="/Staffing/Scripts/customvalidations.js"></script>
<script src="/Staffing/Scripts/uiadditions.js"></script>
<script src="/Staffing/Scripts/default.js"></script>

解决方案: 这是有效的代码:

$(document).ready(function () {
    // enable validation when an input loses focus.
    var allForms = $('form');
    $.each(allForms, function (key, value) {
        var val = $.data(value, 'validator');
        if (val != undefined) {
            var settngs = val.settings;
            settngs.onfocusout = function (element) { $(element).valid(); };
        }});
});

问题是新的验证插件会检查是否存在任何应该验证的元素，我在同一页面上有 2 个表单，第一个表单没有任何经过验证的输入元素。

Answer 1

我刚刚升级到 Microsoft.jQuery.Unobtrusive.Validation.3.2.0 包。我遇到了同样的问题。有没有可能你也升级到了同一个版本？

如果是这样，我可能会提供我的两分钱 :)。经过一些调试后，我注意到在 jquery.validate.unobtrusive.js 中进行了以下更改:

以前的版本:

    var $forms = $(selector)
        .parents("form")
        .andSelf()
        .add($(selector).find("form"))
        .filter("form");

新版本:

        $forms = $selector.parents()
                          .addBack()
                          .filter("form")
                          .add($selector.find("form"))
                          .has("[data-val=true]"); // key point!

关键似乎是:has("[data-val=true]")。也就是说，如果您的表单没有任何具有该属性值的后代(如输入元素)，验证助手将不会对其进行解析，并且不会将“验证器”数据分配给该表单元素。如果您稍后尝试访问该表单的验证器，您将收到此“未定义”错误。

在我的例子中，发生这种情况的表单实际上没有使用任何验证，因此它们没有这个属性。然后我能够更改我的自定义验证器逻辑以在更改验证器设置之前首先检查验证器是否存在。

希望对您有所帮助。