EDIT (by @fnagel), Ticket text:
The jquery ui selectmenu plugin does not support required validation. See the attached test case.
Speed form A contains a selectmenu widget.
Speed form B contains a vanilla select element.
Press "Validate Speed Form B" to see expected behavior.
Press "Validate Speed Form A" and the logger will log that that form is valid.
This branch of Selectmenu has no relation to the official jQuery UI releases maintained at bugs.jquery.com. Please see the Wiki for more Information. Please note there is a new, built from scratch version which is not released yet (#140). The new version will be included in official jQuery UI.
Ive changed the text of your issue. Please provide mentioned demos.
I did create a pastebin (My first ever...):
I can also email the archive with the test and resources. I'm assuming there's no way to attach here?
Thanks - I'll try playing with the "Build from scratch" version to see if that makes a difference. The version I'm using in the test comes from:
Trying to get a little smarter at github and jsfiddle ATM.
OK - I tested the new branch. It also has the same issue. I forked the fiddle that you setup. This is the URL:
I don't have a JSFiddle account, but I'm assuming that work will be cached anyways. I performed the test by modifying the default.html file in the "New" trunk.
Which issues are most pressing ATM? I'll do my best to help.
Here's what's happening. The JQuery Validator assumes that elements that have display set to none are valid.
You mean "The JQuery Validator assumes that elements that have display set to none are NOT valid." aka Validator ignores hidden form elements, correct?
Afaics you just need to use option.ignore, see: http://jsfiddle.net/RYLvP/1/
I think we are saying the same thing. Hidden elements are effectively ignored...so they are essentially valid.
I'm assuming using "" for the ignore options tells the validator to validate all elements? In other words it's doing the inverse of what it was designed to do?
I love that there is a simple solution - Thanks!. I think a lot of future users will fall into the same hole I did though. Another potential issue is the positioning of validation messages. If the select element has the same dimensions and position as the span that proxies it, I suspect these would go away.
Nice to hear it worked for you.
If you dont specify specific options, the original select elements dimensions are used for the span. Positioning could be a problem, but these need to be addressed in the validation plugin. Perhaps this should be discussed with Jörn, the creator of the validation plugin.
It looks good - Thanks again!
I need to play with this more, but I suspect there will be a positioning issue WRT the select element because the description of "display: none" says that it hides the element so it does not take up space in the page. So I would think that if the validation plugin tries to position a message relative to the element, the message could easily end up covered by or on top of the selectmenu span. (Perhaps visibility: hidden is a better option...?) The computed width in firebug stays in tact, but I don't know about other browsers. Users can always use a table to layout their validation messages, but it will be confusing at first if messages show up fine for jquery-ui buttons, but not for selectmenu instances.
Another design consideration might be what happens when someone needs to use the ignore option to actually ignore an element.
"it does not take up space in the page" is exactly what we wanted to achieve. Its a replacement.
In my opinion both, the positioning and the ignore option issue, needs to be discussed with the author of the validation plugin.
Sure - Let me do a post on the forum and perhaps Jörn can put his perspective on it.
OK - I posted here:
I performed some more testing and the positioning of validation messages is different for jquery ui selectmenu instances and jquery ui buttons. When validating the content of buttons, messages appear by default to the right of the button. When using selectmenu the messages float to the top of the selectmenu instance.