[validation] 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:

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

This question is related to validation jquery-validate

The answer is


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.


I ran into this issue when the number of <th> tags in the '' did not match the number of in the <tfoot> section

<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>

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.


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.


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


Extract from the oficial docs:

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

more about... rules