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

Question

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

why you are not just adding the validate function with its rules as properties in json ? — Prog Mania
– Prog Mania, Commented Oct 3, 2012 at 13:24
I'm trying to add validation to a set of grid rows. But i have found my problem. Thank you for your time and attention. — Dragos Durlut
– Dragos Durlut, Commented Oct 5, 2012 at 8:26

Abdellah IDRISSI · Accepted Answer · 2015-10-21 16:44:57Z

86

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.

edited Oct 21, 2015 at 16:44

Abdellah IDRISSI

5491 gold badge6 silver badges16 bronze badges

answered Oct 5, 2012 at 8:28

Dragos Durlut

8,09811 gold badges51 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Leniel Maccaferri Over a year ago

This one caught me for almost 2 hours... the element must be inside a form. Duhhhh :( Thanks for sharing! :) Just to mention: in my case I was trying to add a rule to an input file. This is the so helpful error I got on Firebug: elem null on this jQuery line: f ( elem.nodeType && elem.nodeType !== 1 && elem.nodeType !== 9 )

Tien Do Over a year ago

It made me like an idiot in the past hour, fields were all in a form but when jQuery dialog opened, it moved them out of the form, then validation failed with a strange error message. Why jQuery UI doesn't issue a warning message in the console?

Dhilipkumar · Accepted Answer · 2013-09-17 09:29:18Z

5

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.

answered Sep 17, 2013 at 9:29

Dhilipkumar

511 silver badge1 bronze badge

1 Comment

Bibek Sharma Over a year ago

same case for me, I was also adding rules on the nested form before insert event. Thanks man!

lipsumar · Accepted Answer · 2014-04-09 12:03:11Z

4

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.

answered Apr 9, 2014 at 12:03

lipsumar

1,0119 silver badges22 bronze badges

1 Comment

user3808307 Over a year ago

I don't understand this, could you tell me how to apply it in practice?

apb · Accepted Answer · 2018-02-05 16:14:49Z

2

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.

answered Feb 5, 2018 at 16:14

apb

3,3903 gold badges32 silver badges23 bronze badges

1 Comment

Dio F Over a year ago

Wow... took some time to realize this. This also works without <ul>, so applying class="nav nav-tabs" to a parent element is enough. But is definitely a Bootstrap 4 issue. Bootstrap 3 was fine without.

jfernandez_04 · Accepted Answer · 2018-04-10 13:36:46Z

1

Extract from the oficial docs:

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

more about... rules

answered Apr 10, 2018 at 13:36

jfernandez_04

1522 silver badges10 bronze badges

Comments

Pramesh · Accepted Answer · 2020-08-26 15:11:13Z

1

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>

edited Aug 26, 2020 at 15:11

answered Feb 19, 2020 at 5:57

Pramesh

1,26413 silver badges16 bronze badges

Comments

Roy Art · Accepted Answer · 2013-10-31 15:36:20Z

0

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

answered Oct 31, 2013 at 15:36

Roy Art

7136 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related