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
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.