how do you set up a required select without a default value selected

Question

I'm trying force the user to make a selection, rather than just using the first field. How do I prevent the user from submitting this form without using javascript?

<select required>
  <option >Make a selection</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option value="audi">Audi</option>
</select>

I think its impossible, just do the validation in the server-side or use the html 5 validators http://www.the-art-of-web.com/html/html5-form-validation/ — Netorica, Aug 15 '14 at 04:20
you can use ajax to validate the select box and display the msg required if the value is default. — Faiz Ahmed, Aug 15 '14 at 04:25

score 74 · Accepted Answer · edited May 23 '17 at 12:19

Per this answer, you can use HTML5's required attribute on a <select> if you give the default <option> an empty value attribute (among other criteria, see the <select> docs).

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.

So you would want

<select required>
    <option value="">Make a selection</option>
    <!-- more <option>s -->
</select>

Older browsers will need a JavaScript solution, given the fact that they don't support HTML5.

please note that the first option that has no value (e.g. ` `), cannot have the `disabled` attribute otherwise the selection moves straight away to the next enabled option. — Fed, May 12 '21 at 10:54

score 3 · Answer 2 · answered Aug 15 '14 at 04:22

The HTML5 spec on select defines an option with a value of the empty string as a 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.

It should be noted that, for IE, the "required" attribute is only supported in IE10+. http://www.wufoo.com/html5/attributes/09-required.html — jbarreiros, Aug 15 '14 at 04:24

how do you set up a required select without a default value selected

2 Answers2