jquery validator checkbox "element is undefined"

Question

I'm trying to use the jQuery Validation plugin to make a multistep form with tabs, but I keep getting an "element is undefined" error when I attempt to loop through all the inputs. Any suggestions? I don't understand what's wrong. I've tried placing the checkbox in multiple places, and it seems to happen everywhere (i.e. not just at the 2nd last tab).

var tabs = $("#tabs").tabs({

        disabled: [1,2,3,4,5],

        select: function(event, ui) {
            var valid = true;
            var current = $(this).tabs("option", "selected");
            var panelId = $("#tabs ul a").eq(current).attr("href");



            $(panelId).find("input").each(function(index, element) {
                if (!validator.element(this) && valid) {

                    if(ui.index > current) {
                        valid = false;
                    }
                    else
                    {
                        //re-disable the next tab 
                    }
                }
            });


            return valid;
        }   

    });


    $(".nexttab").click(function() {
        var selected = $("#tabs").tabs("option", "selected");
        $("#tabs").tabs("enable", selected+1);
        $("#tabs").tabs("option", "selected", selected + 1);
    });

HTML Part:

<div id="general">
</div>

<div id="problemtab">

    <p>
        <input type="checkbox" name"response" id="response" value="agree" class="required"><label for="response">I Agree</label>
    </p>

    <p>
        <a class="prevtab navbutton"><span>Prev</span></a>
        <a class="nexttab navbutton"><span>Next</span></a>
    </p

</div>

<div id="lasttab">
</div>

Thanks for any help!

Edit:

It's giving me an error in jquery-validate.js:787

    staticRules: function(element) {
        var rules = {};
        var validator = $.data(element.form, 'validator'); // <---- Error here
        if (validator.settings.rules) {
            rules = $.validator.normalizeRule(validator.settings.rules[element.name]) || {};
        }
        return rules;
    },

Edit#2: element/this is defined as [object HTMLInputElement]

Here is my validator:

var validator = $("#myForm").validate({

    ignore : ['#tabs .inactive input'], // tells the validator to only validate elements on your current tab

errorElement: "div",
wrapper: "div",  // a wrapper around the error message
errorPlacement: function(error, element) {

        if (element.parent().hasClass('group')){
            element = element.parent();
        }


    offset = element.position();
    error.insertBefore(element)
    error.addClass('message');  // add a class to the wrapper
    error.css('position', 'absolute');
    error.css('left', offset.left + element.outerWidth());
    error.css('top', offset.top);


    }
});

@James: It's below the tab code. Should it be above? I don't get why it works with non-checkbox inputs. Added to my post, sorry about that. — Jordan, Apr 15 '11 at 06:03

score 5 · Accepted Answer · answered Nov 04 '11 at 09:47

5

You forgot an equal sign for the name attribute of your checkbox, so the name attribute is not set.

name"response" should be name="response"

I noticed yesterday that jquery.validate needs a name on elements to work, or it will throw this error.

answered Nov 04 '11 at 09:47

lolesque

10,693
5
42
42

score 1 · Answer 2 · answered Dec 24 '12 at 22:25

1

Make sure you have just one form in your page. I used to have two forms in the same page and that was causing the problem you mention.

answered Dec 24 '12 at 22:25

thepirat000

12,362
4
46
72

score 0 · Answer 3 · answered Jun 03 '16 at 16:12

0

This error also might be related to this issue of JQuery with hidden chekcboxes (or radioboxes). This issue hasn't been addressed but it could be solved by setting (temporarily) validatorInstance.settings.ignore =''.

answered Jun 03 '16 at 16:12

Mojtaba

2,764
1
21
24

score 0 · Answer 4 · answered Aug 22 '19 at 06:24

I faced that issue with checkboxes & hidden inputs on the form in MVC 5 Jquery 3.3.1, nothing worked so I had to disable the default validation and do some custom validation.

<button type="submit" id="btnSubmit" formnovalidate="formnovalidate" class="btn">Submit</button>

It started coming when I added

$.validator.methods.date = function (value, element) { .....

jquery validator checkbox "element is undefined"

4 Answers4