Jordan Jordan - 6 months ago 16
Javascript Question

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


}
});

Answer

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.