jQuery validate Uncaught TypeError: Cannot read property 'nodeName' of null

问题:

I have the following code:

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

The code fails then it reeaches $(this).rules() with: Uncaught TypeError: Cannot read property 'nodeName' of null. the html returned by $('#gvListDetaliiElemTranAdaugare input[name$=Valoare]') is:

回答1:

I have found the problem.

The problem was that the HTML I was trying to validate was not contained within a <form>...</form> tag.

As soon as I did that, I had a context that was not null.

回答2:

The problem happened because I was trying to bind a HTML element before it was created.

My script was loaded on top of the HTML and it needs to be loaded at the bottom of my HTML code.

回答3:

I had this problem in a Backbone project: my view contains a input and is re-rendered. Here is what happens (example for a checkbox):

• The first render occurs;
• jquery.validate is applied, adding an event onClick on the input;
• View re-renders, the original input disappears but jquery.validate is still bound to it.

The solution is to update the input rather than re-render it completely. Here is an idea of the implementation:

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

This way you don't have to change any existing code calling render(), simply make sure update() keeps your HTML in sync and you're good to go.

回答4:

I found this answer when I was getting a similar error for nodeName after upgrading to Bootstrap 4. The issue was that the tabs didn't have the nav and nav-tab classes; adding those to the <ul> element fixed the issue.

回答5:

I had this problem and it was because the panel was outside of the [data-role="page"] element.

回答6:

Extract from the oficial docs:

Requires that the parent form is validated, that is, $( "form" ).validate() is called first

more about... rules

文章来源: jQuery validate Uncaught TypeError: Cannot read property 'nodeName' of null