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?

You should provide a jsfiddle, or embed a snippet, demonstrating the issue. — S. Walker, Jan 22 '18 at 00:58

score 1 · Answer 1 · answered Jan 22 '18 at 02:36

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.

answered Jan 22 '18 at 02:36

Alohci

78,296
16
112
156

score -1 · Answer 2 · answered Jan 22 '18 at 01:15

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

Why select doesn't validate required attribute in some cases

2 Answers2