What is the expected behavior of not using a value in an option of a required select? - html

Question

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"?

Answer 1

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.