<optgroup> in select is not supported when onclick() is called

[nzamani]

I use jQuery 1.6.1 and Validation 1.8.1.

I have the following code in HTML (includes optgroup!):

<select size="1" id="salutation" class="required" name="list" id="list">
<optgroup label="please select a salutation">
<option value="1" >Mr</option>
<option value="2" >Mrs</option>
<option value="3" >Dr</option>
<option value="4" >Prof Dr</option>
<optgroup>
</select>

Now imagine $('#salutation').valid() returns false and the is highlighted. What I expect is that on selection of any of the options the errors are unhighlighted - no matter if selected via keyboard or via clicking with mouse. But if you use your mouse this only works if you select an option via click and afterwards click somewhere else to make onfocusout() in validate.js being fired. Using keys seems to work fine. In validate.js I can see: onfocusout: function(element) { if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element)) ) { this.element(element); } }, onkeyup: function(element) { if ( element.name in this.submitted || element == this.lastElement ) { this.element(element); } }, onclick: function(element) { // click on selects, radiobuttons and checkboxes if ( element.name in this.submitted ) this.element(element); // or option elements, check parent select in that case else if (element.parentNode.name in this.submitted) this.element(element.parentNode); } It seems only onfocusout() and onkeyup() work fine if fired. onclick() does not work. If I leave away the then everything works as expected. It would be great to have the handling fixed in onkeyup() and onclick().

[CraigStuntz]

Looks like a real bug.

One possible fix would be:

    onclick: function(element) {
        // click on selects, radiobuttons and checkboxes
        if ( element.name in this.submitted )
            this.element(element);
        // or option elements, check parent select in that case
        else if (element.parentNode.name in this.submitted)
            this.element(element.parentNode);
        // or option with optgroup elements, check parent select in that case
        else if (element.parentNode.parentNode && element.parentNode.parentNode.name in this.submitted)
            this.element(element.parentNode.parentNode);
    },

As a workaround, you can override this with setDefaults.

[jmm]

I ran into this too. See this gist for the workaround I used. I passed it as the onclick member of the options argument to jQuery.validate(), but per @CraigStuntz suggestion, looks like it could alternatively be passed to jQuery.validator.setDefaults().

I wanted to replace the minimal amount of built-in functionality necessary, and element.parentNode.parentNode just seems grotesque to me. I think there has also been some discussion about allowing OPTGROUP to be nested.

[jzaefferer]

Should try to use jQuery's closest method to look for the parent select element instead. Might help to reduce these checks into a single if, while adding support for optgroups.

[bartsipes]

Is this still a bug? I was not able to reproduce this using the steps @nabster83 listed above.

[jzaefferer]

Considering that the report is three years old and the last confirmation 2 years old, its likely it was solved somewhere along the way. Thanks @bartsipes for checking.

[PeterPan73]

@bartsipes Can you post the solution?

[bartsipes]

@didsun not sure what you mean. There was no solution or fix. It was working already when I tested it.