Why select doesn't validate required attribute in some cases

Question

Validation occurs:

<select name="fruit" required>
  <option value="" selected> Select a fruit </option>
  <option value="apple"> Apple </option>
</select>

Validation never happens:

<select name="fruit" required>
  <option value="apple"> Apple </option>
  <option value="" selected> Select a fruit </option>
</select>

Question

Why HTML doesn't considers the validation of required attribute in all cases that an empty option are selected?

Answer 1

Because its trying to treat the first element, since it's value is empty, as a placeholder label option, not a option to be selected, and therefore selecting it does not satisfy the "required" constraint.

Answer 2

You are right as default HTML5 validator will only check the value of the first selectable if you mark the input as required.

https://www.w3schools.com/code/tryit.asp?filename=FNP50ZBTEYOE

To modify this, you will need to use another validator and customize it by some code as well.

jQuery Validate Required Select