CODEWITHSUNDEEP
javascriptjqueryvalidationcheckbox
Jordan
Jordan

Reputation: 9114

jquery validator checkbox "element is undefined"

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


    }
});

Upvotes: 4

Views: 3762

Answers (4)

dnxit
dnxit

Reputation: 7350

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) { .....

Upvotes: 0

Mojtaba
Mojtaba

Reputation: 3513

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 =''.

Upvotes: 0

thepirat000
thepirat000

Reputation: 13114

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.

Upvotes: 1

lolesque
lolesque

Reputation: 11980

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.

Upvotes: 5

Related Questions