IE10 Gotcha: Optgroup Indexes and the Required Attribute

I came across a rather interesting gotcha in Internet Explorer 10.0.9200.16519 this evening (via @dstorey, who showed me this question). Setting the required attribute on a select element that has various optgroup elements within may result in unexpected warnings upon form submission.

The above form will be “invalid” if the index of the selected option among its siblings matches the index of its parent optgroup among its siblings. So the first optgroup and the first option will trigger the unexpected results when the parent select has the required attribute.

This pattern is consistent with the second, third, and fourth optgroup elements. Selecting the second option in the second optgroup, or the third option in the third optgroup, will cause form submission to fail.


Update: As Claude pointed out in the comments below, adding a non-empty value attribute to the optgroup elements will resolve the issue.

I have found only one way around this, but it may not work in most situations. Adding the multiple attribute to the same select will prevent the confusing behavior, but at the cost of affecting the presentation and behavior of your element. The size attribute could remedy this to some degree, but is not favorable.