web-dev-qa-db-fra.com

jQuery validate Uncaught TypeError: Impossible de lire la propriété 'nodeName' de null

J'ai le code suivant:

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


                    }
                }
            );
        }
    );

Le code échoue puis il renvoie $ (this) .rules () avec: Uncaught TypeError: Cannot read property 'nodeName' of null. le html renvoyé par $('#gvListDetaliiElemTranAdaugare input[name$=Valoare]') est:

[
<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">​
]
validationjquery-validate
32
Dragos Durlut

J'ai trouvé le problème.

Le problème était que le code HTML que je tentais de valider ne figurait pas dans une balise <form>...</form>.

Dès que j'ai fait cela, j'ai eu uncontextqui n'était pas nul.

78
Dragos Durlut

J'ai eu ce problème dans un projet Backbone: ma vue contient une entrée et est restituée. Voici ce qui se passe (exemple d’une case à cocher):

  • Le premier rendu se produit;
  • jquery.validate est appliqué, en ajoutant un événement onClick sur l'entrée;
  • La vue restituée, l'entrée d'origine disparaît mais jquery.validate est toujours lié à celle-ci.

La solution consiste à mettre à jour les entrées plutôt que de les restituer complètement. Voici une idée de la mise en oeuvre:

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

De cette façon, vous n'avez pas besoin de changer le code existant en appelant render (), assurez-vous simplement que update () maintient votre code HTML synchronisé et vous êtes prêt à partir.

4
lipsumar

Le problème est dû au fait que j'essayais de lier un élément HTML avant sa création.

Mon script a été chargé au-dessus du code HTML et il doit être chargé au bas de mon code HTML.

4
Dhilipkumar

J'ai trouvé cette réponse lorsque j'obtenais une erreur similaire pour nodeName après la mise à niveau vers Bootstrap 4. Le problème était que les onglets ne comportaient pas les classes nav et nav-tab; l'ajout de ceux-ci à l'élément <ul> a résolu le problème.

1
apb

J'ai eu ce problème et c'était parce que le panneau était en dehors de l'élément [data-role = "page"].

0
Roy Art