jQuery 验证未捕获的类型错误：无法读取 null 的属性“nodeName”答案

【问题标题】：jQuery validate Uncaught TypeError: Cannot read property 'nodeName' of nulljQuery 验证未捕获的类型错误：无法读取 null 的属性“nodeName”
【发布时间】：2012-10-03 13:21:32
【问题描述】：

我有以下代码：

$(document).ready
(
    function ()
    {
        $.validator.addMethod(
        "lessThan",
        function (value, element, param)
        {
            // bind to the blur event of the target in order to revalidate whenever the target field is updated            
            var target = $(param)
            .unbind(".validate-lessThan")
            .bind
            (
                "blur.validate-lessThan",
                function ()
                {
                    $(element).valid();
                }
            );
            return parseFloat(value) <= parseFloat(target.val());
        },
        "Valoarea trebuie sa fie mai mica sau egala decat valoarea initiala"
        );
    }
);


$('#gvListDetaliiElemTranAdaugare input[name$=Valoare]').each
    (
        function (index, domEle)
        {
            $(this).rules
            (
                "add"
                , {

                    required: true,
                    minlength: 1,
                    range: [0.1, Number.MAX_VALUE],
                    lessThan: '#ListaDetaliiElemTranModelAdaugare_' + index + '__ValoareRamasa',
                    messages:
                    {
                        required: "Valoarea este necesara!",
                        minlength: "Valoarea este necesara!",
                        range: "Valoarea este necesara!",
                        lessThan: "Valoarea trebuie sa fie mai mica sau egala cu " + $('#ListaDetaliiElemTranModelAdaugare_' + index + '__ValoareRamasa').val()


                    }
                }
            );
        }
    );

代码失败，然后它通过：Uncaught TypeError: Cannot read property 'nodeName' of null 到达 $(this).rules()。 $('#gvListDetaliiElemTranAdaugare input[name$=Valoare]')返回的html是：

[
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_0__Valoare" name="ListaDetaliiElemTranModelAdaugare[0].Valoare" onchange="OnValoareChange($(this).val(), 18590 , 0)" type="text" value="0.00000000000">
, 
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_1__Valoare" name="ListaDetaliiElemTranModelAdaugare[1].Valoare" onchange="OnValoareChange($(this).val(), 22972 , 1)" type="text" value="0.00000000000">
, 
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_2__Valoare" name="ListaDetaliiElemTranModelAdaugare[2].Valoare" onchange="OnValoareChange($(this).val(), 23036 , 2)" type="text" value="0.00000000000">
, 
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_3__Valoare" name="ListaDetaliiElemTranModelAdaugare[3].Valoare" onchange="OnValoareChange($(this).val(), 23038 , 3)" type="text" value="0.00000000000">
, 
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_4__Valoare" name="ListaDetaliiElemTranModelAdaugare[4].Valoare" onchange="OnValoareChange($(this).val(), 425306 , 4)" type="text" value="0.00000000000">
, 
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_5__Valoare" name="ListaDetaliiElemTranModelAdaugare[5].Valoare" onchange="OnValoareChange($(this).val(), 425308 , 5)" type="text" value="0.00000000000">
, 
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_6__Valoare" name="ListaDetaliiElemTranModelAdaugare[6].Valoare" onchange="OnValoareChange($(this).val(), 425309 , 6)" type="text" value="0.00000000000">
, 
<input data-type="decimal" id="ListaDetaliiElemTranModelAdaugare_7__Valoare" name="ListaDetaliiElemTranModelAdaugare[7].Valoare" onchange="OnValoareChange($(this).val(), 425310 , 7)" type="text" value="0.00000000000">
]

【问题讨论】：

为什么你不只是将 validate 函数及其规则作为属性添加到 json 中？
查看此页面jquery.bassistance.de/validate/demo
我没有找到任何有用的东西
你到底想做什么？
我正在尝试向一组网格行添加验证。但我发现了我的问题。感谢您的时间和关注。

标签： validation jquery-validate

【解决方案1】：

我找到了问题。

问题是我尝试验证的 HTML 未包含在 <form>...</form> 标记中。

当我这样做时，我有一个不为空的 context。

【讨论】：

这个让我抓了将近 2 个小时...该元素必须在表单中。 Duhhhh :( 感谢分享！:) 顺便提一下：在我的情况下，我试图向输入文件添加规则。这是我在 Firebug 上遇到的非常有用的错误：elem null 在这条 jQuery 行上：f ( elem.nodeType && elem.nodeType !== 1 && elem.nodeType !== 9 )
在过去的一个小时里，这让我像个白痴，字段都在一个表单中，但是当 jQuery 对话框打开时，它会将它们移出表单，然后验证失败并显示一条奇怪的错误消息。为什么jQuery UI没有在控制台发出警告信息？

【解决方案2】：

问题发生是因为我试图在创建 HTML 元素之前对其进行绑定。

我的脚本是在 HTML 之上加载的，它需要在我的 HTML 代码的底部加载。

【讨论】：

对我来说同样的情况，我还在插入事件之前在嵌套表单上添加了规则。谢谢大佬！

【解决方案3】：

我在 Backbone 项目中遇到了这个问题：我的视图包含一个输入并被重新渲染。以下是发生的情况（复选框示例）：

第一次渲染发生；
应用了jquery.validate，在输入上添加了onClick事件；
视图重新渲染，原来的输入消失了，但 jquery.validate 仍然绑定到它。

解决方案是更新输入而不是完全重新渲染它。这是实现的一个想法：

var MyView = Backbone.View.extend({
    render: function(){
        if(this.rendered){
            this.update();
            return;
        }
        this.rendered = true;

        this.$el.html(tpl(this.model.toJSON()));
        return this;
    },
    update: function(){
        this.$el.find('input[type="checkbox"]').prop('checked', this.model.get('checked'));
        return this;
    }
});

这样您就不必更改任何调用 render() 的现有代码，只需确保 update() 使您的 HTML 保持同步即可。

【讨论】：

这个我不明白，你能告诉我如何在实践中应用它吗？

【解决方案4】：

当我在升级到 Bootstrap 4 后遇到 nodeName 的类似错误时，我找到了这个答案。问题是选项卡没有 nav 和 nav-tab 类；将这些添加到 <ul> 元素可以解决问题。

【讨论】：

哇...花了一些时间才意识到这一点。这在没有<ul> 的情况下也有效，因此将class="nav nav-tabs" 应用于父元素就足够了。但绝对是 Bootstrap 4 的问题。没有 Bootstrap 3 也很好。

【解决方案5】：

摘自官方文档：

需要验证父表单，即先调用$("form").validate()

更多关于...rules

【讨论】：

【解决方案6】：

当''中的<th>标签的数量与<tfoot>部分中的数量不匹配时，我遇到了这个问题

<thead>
    <tr>
        <th></th>
        <th>Subject Areas</th>
        <th></th>
        <th>Option(s)</th>
    <tr>
</thead>

<tbody></tbody>

<tfoot>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</tfoot>

【讨论】：

【解决方案7】：

我遇到了这个问题，这是因为面板位于 [data-role="page"] 元素之外。

【讨论】：