jQuery 验证： $.data($('form')[0], 'validator').settings 返回未定义

Posted 2023-05-09

【中文标题】jQuery 验证： $.data($(\'form\')[0], \'validator\').settings 返回未定义

【英文标题】：jQuery Validation: $.data($('form')[0], 'validator').settings returns undefinedjQuery 验证： $.data($('form')[0], 'validator').settings 返回未定义

【发布时间】：2014-08-25 20:39:27

【问题描述】：

我有一个 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') 返回 undefined ($.data($('form')[ 0]) 返回一个空对象）：

未捕获的类型错误：无法读取未定义的属性“设置”

然而，当按下提交按钮时，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 个表单，第一个表单没有任何经过验证的输入元素。

【参考方案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]")。也就是说，如果您的表单没有任何具有该属性值的后代（如输入元素），则验证助手不会对其进行解析，并且不会将“验证器”数据分配给该表单元素。如果您稍后尝试访问该表单的验证器，则会收到此“未定义”错误。

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

希望对您有所帮助。

【讨论】：

这就是原因。请参阅我编辑的问题以了解正在运行的代码。

哇。我们为动态控件选择了不显眼的 razor：在表单下的某处设置一个容器 div 恢复了我们所有损坏的验证。这很难找到，这个答案非常有帮助。谢谢。

是的，绝对有帮助，我的大部分字段都是只读的，而没有的两个字段没有任何 data-val 属性。很难找到，花了大约一个小时。

【参考方案2】：

这也可能发生在您没有在表单上调用 validate() 时：

$("#your_form").validate();

就我而言，我的页面上没有 ID 为“your_form”的表单，因此在尝试添加规则时会导致此错误。

【讨论】：

通过 ajax 动态添加表单时为我工作

【参考方案3】：

看起来您的项目使用不同类型的验证（其中一个使用不显眼，第二个使用默认）。

请检查您是否在两个项目的 web.config 中使用下一个设置。：

<configuration>    
  <appSettings>        
    <add key="ClientValidationEnabled" value="true"/>        
    <add key="UnobtrusivejavascriptEnabled" value="true"/>    
  </appSettings>
</configuration>

您还尝试使用文档中的第一个表单。

如果没有表单 - 你会得到错误。

如果有多个表单 - 只有第一个表单会使用 focusout 进行验证。

所以你应该对每个表单做同样的事情：

$(document).ready(function () 
    var $forms = $('form');
    $.each($forms, function (key, value) 
        // enable validation when an input loses focus.
        var settings = $.data(value, 'validator').settings;
        settings.onfocusout = function (element)  $(element).valid(); ;
    );
);

【参考方案4】：

这样做$.validator.unobtrusive.parse($("#base-modal form")); 解决了我的问题

【参考方案5】：

先结帐表格数量，我认为您使用的表格不正确。

$(document).ready(function () 
// enable validation when an input loses focus.
   if($('form').length > 0) 
     // $('form')[0] is it proper form?
     var settngs = $.data($('form')[0], 'validator').settings;
     settngs.onfocusout = function (element)  $(element).valid(); ;
   
);

【讨论】：

$('form').length > 0 返回true（页面上有表单）