0

I'm making a dojo widget that parses a <select> object along with its <options> and creates a facade select object out of other elements with accessibility and such and a hidden select element. While trying to figure out how to be able to prevent a user from being able to use an <option> without a value, I attempted to try to utilize some facets from this question which says to add an option with an empty string value and make it selected and disabled.

That's all well and good, but the user is still able to submit the form if the "placeholder" option is still selected. To fix this, I made the <select> required so that the user would have to pick an option.

Now, in Firefox, trying to submit this form without choosing a different option pops up the tooltip on the select saying "Please select an item in the list". In Chrome though, the form submits just fine with no warning. IE11 is the same as Chrome, Opera as well.

Considering 3 out of the 4 browsers I tested in, the form ignores the required is it safe to say that that in this case, the requirement is a gray area or is Firefox the only one implementing this correctly? Either way, I'm going to need to find another way to get this to work.

HTML

<form action="#" method="get">
   <select name="sel" required>
      <option disabled selected>Hello</option>
      <option value="1">World</option>
      <option value="2">Foo</option>
      <option value="3">Bar</option>
   </select>
   <button type="submit">Send</button>
</form>

Edit

I guess one of the things that confuses me is that whenever I inspect the <option> its value is automatically set to its innerText which is kind of expected and happens in all browsers. However, whenever the form is submitted, that value is not actually given as the value of the select. Instead, there is no value, considering that there is no query param appended. I'm using the following to grab the value:

document.getElementsByTagName("option")[0].value;

Edit 2

Another thing, according to the HTML spec that first option without a value should be the placeholder label option:

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

And stemming from that this select option is suffering from being missing:

Constraint validation: If the element has its required attribute specified, and either none of the option elements in the select element's list of options have their selectedness set to true, or the only option element in the select element's list of options with its selectedness set to true is the placeholder label option, then the element is suffering from being missing.

Does "Suffering from being missing mean that the form should not submit"?

Community
  • 1
  • 1
zero298
  • 25,467
  • 10
  • 75
  • 100

1 Answers1

2

You need to give it an empty value:

<option disabled selected value="">Hello</option>

If an option doesn't have a value attribute, it defaults to the text in the option. A required input will be considered valid if the value is not the empty string, so you need to provide the attribute explicitly.

I think the discrepancy in behavior between the browsers is permitted because the original HTML was not valid. The specification says

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1; and if the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

If a select element has a required attribute specified, does not have a multiple attribute specified, and has a display size of 1, then the select element must have a placeholder label option.

In the original code, there was no placeholder label option because the first option's value was not the empty string. So it violated the must have requirement in the second paragraph. This gives the browsers some license to interpret the HTML differently.

Community
  • 1
  • 1
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • `value` isn't technically required though. I'm trying to safeguard against another developer accidentally forgetting to give an empty string value by making it required. – zero298 Jun 20 '14 at 00:59
  • @zero298 It's not technically required, but as Barmar stated, if it's omitted, the ua SHOULD reference the element's text (according to spec, which states "The value attribute provides a value for element. The value of an option element is the value of the value content attribute, if there is one, or, if there is not, the value of the element's text IDL attribute.") – Jack Jun 20 '14 at 01:03
  • @zero298 `value` isn't required in general, but it's required in this case if you want `required` to prevent you from submitting the default option. – Barmar Jun 20 '14 at 01:07
  • It seems like it, I guess they're trying to be helpful and treat a disabled option as not valid. The HTML5 spec for `required` is here: http://www.w3.org/TR/2011/WD-html5-20110525/common-input-element-attributes.html#the-required-attribute – Barmar Jun 20 '14 at 01:17
  • FF has another difference I noticed. If you don't specify `selected` on the disabled option, it doesn't use it as the default option even though it's first. – Barmar Jun 20 '14 at 01:21
  • @Barmar isn't it supposed to be the "placeholder" at that point? – zero298 Jun 20 '14 at 01:24
  • See the section of the spec that I just added to my answer. – Barmar Jun 20 '14 at 01:38