Geek Answers Handbook

Jquery validator checkbox "element undefined"

I try to use the jQuery Validation plugin to create a multi-stage tabbed form, but I keep getting the "element is undefined" error when I try to iterate over all the inputs. Any suggestions? I don’t understand what happened. I tried to check the box in several places, and this seems to be happening all over the place (i.e. Not only in the second 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 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 [HTMLInputElement object]

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); } });
+4
source share
4 answers

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

name"response" must be name="response"

Yesterday I noticed that jquery.validate needs a name for the elements to work, or it will generate this error.

+5
source

Make sure there is only one on your page. I had two forms on the same page, and this caused the problem you mention.

+1
source

This error could also be related to this jQuery issue with hidden chekcboxes (or radio exchanges). This problem was not fixed, but it could be solved by setting (temporarily) validatorInstance.settings.ignore ='' .

0
source

I ran into this problem with checkboxes & hidden form inputs in MVC 5 Jquery 3.3.1, nothing worked, so I had to disable the default check and do some custom check.

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

It started when I added

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

More articles:


All Articles