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

Dragos Durlut picture Dragos Durlut · Oct 3, 2012 · Viewed 104.5k times · Source

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

Answer

Dragos Durlut picture Dragos Durlut · Oct 5, 2012

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.