32

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">​
]
5
  • why you are not just adding the validate function with its rules as properties in json ?
    – Prog Mania
    Oct 3, 2012 at 13:24
  • check this page jquery.bassistance.de/validate/demo
    – Prog Mania
    Oct 3, 2012 at 13:52
  • I didn;t find anything useful there Oct 4, 2012 at 5:37
  • what you are trying to do exactly?
    – Prog Mania
    Oct 4, 2012 at 13:42
  • 1
    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. Oct 5, 2012 at 8:26

7 Answers 7

87

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
  • 5
    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 ) Feb 17, 2013 at 4:34
  • 3
    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?
    – Tien Do
    Aug 10, 2013 at 8:09
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.

1
  • same case for me, I was also adding rules on the nested form before insert event. Thanks man! May 25, 2017 at 4:27
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.

1
  • I don't understand this, could you tell me how to apply it in practice? Feb 18, 2016 at 4:12
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.

1
  • 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.
    – Dio F
    Mar 20, 2018 at 21:29
1

Extract from the oficial docs:

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

more about... rules

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.