validation - jQueryはUncaught TypeErrorを検証します:nullのプロパティ 'nodeName'を読み取れません

Question

次のコードがあります。

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


                    }
                }
            );
        }
    );

コードは失敗し、 $(this).rules() with: に到達しますUncaught TypeError: Cannot read property 'nodeName' of null。によって返される html$('#gvListDetaliiElemTranAdaugare input[name$=Valoare]')は次のとおりです。

[
<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">
]

score 86 · Accepted Answer

問題が見つかりました。

問題は、検証しようとしていた HTML が<form>...</form>タグ内に含まれていなかったことです。

私がそれをするとすぐに、contextnull ではないがありました。

score 4 · Accepted Answer

バックボーンプロジェクトでこの問題が発生しました。ビューに入力が含まれており、再レンダリングされます。これが何が起こるかです（チェックボックスの例）：

最初のレンダリングが発生します。
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 の同期を維持していることを確認するだけで、準備完了です。

score 4 · Accepted Answer

この問題は、作成前に HTML 要素をバインドしようとしたために発生しました。

スクリプトは HTML の上に読み込まれ、HTML コードの最後に読み込む必要があります。

score 0 · Accepted Answer

この問題が発生しましたが、それはパネルが [data-role="page"] 要素の外側にあったためです。

validation - jQueryはUncaught TypeErrorを検証します:nullのプロパティ 'nodeName'を読み取れません

7 に答える 7

Related

Reference