Requiring dropdown selection in Chrome

Question

Using "required" on a dropdown form element with a "disabled" selection works in Firefox to prevent users from submitting a form without selecting something from the dropdown list, but not in Chrome. Can you help?

<select id="topic" class="form-control" required="required">
      <option disabled selected>select genre</option>
      <option>All genres (whatever works)</option>
      <option>boogers</option>
      <option>cheese</option>
      <option>dumplings</option>
</select>

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

This may work

<option selected="true" disabled="disabled">select genre</option>

src: How to show disable HTML select option in by default?

edited May 23 '17 at 12:24

Community

1
1

answered Oct 15 '14 at 17:52

Triplus

126
9

It does work for me in chrome. I'm using the 37.0.2062.124 m-64bit version. I can't reselect "select genre". – Triplus Oct 15 '14 at 20:07
Hmm. Maybe I'm giving incomplete information. The problem is that it lets me click the Submit button in my full form and follow through with the action attached to Submit, if I skip it without selection an option. In Firefox, it tells me I have to complete that field first. – Quin Oct 15 '14 at 21:00
I would use some client-side validation (js) and serverside (php) for this. Maybe firefox does this automatically. – Triplus Oct 16 '14 at 06:02
Yeah, I'm using Meteor (javascript), so that's the route I decided to go. Thanks. – Quin Oct 17 '14 at 14:41

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

To get it working just add value="" to your default option. This answer provides some HTML5 documentation on the matter.

Can I apply the required attribute to <select> fields in HTML5?

edited May 23 '17 at 11:45

Community

1
1

answered Dec 01 '16 at 15:25

gmustudent

2,229
6
31
43

Requiring dropdown selection in Chrome

2 Answers2