How can I check if a user has selected something from a <select> field in HTML5?
I see <select> doesn't support the new required attribute... do I have to use JavaScript then? Or is there something I’m missing? :/
Asked
Active
Viewed 2.4e+01k times
275
Paul D. Waite
- 89,393
- 53
- 186
- 261
Matt
- 4,567
- 9
- 30
- 38
-
4Per the current editor's draft of the HTML5 spec (6 Aug 2011), the select element does have a required attribute. "The required attribute is a boolean attribute. When specified, the user will be required to select a value before submitting the form." http://dev.w3.org/html5/spec/Overview.html#the-select-element – james.garriss Aug 09 '11 at 18:25
-
1If you're interested in any level of cross-browser compatibility, you'll probably have to use JavaScript. The attribute you want is `selectedIndex`. – Luke Sneeringer May 18 '11 at 17:34
13 Answers
503
Mandatory: Have the first value empty - required works on empty values
Prerequisites: correct html5 DOCTYPE and a named input field
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
As per the documentation (the listing and bold is mine)
The required attribute is a boolean attribute.
When specified, the user will be required to select a value before submitting the form.If a select element
- has a required attribute specified,
- does not have a multiple attribute specified,
- and has a display size of 1 (do not have SIZE=2 or more - omit it if not needed);
- and if the value of the first option element in the select element's list of options (if any) is the empty string (i.e. present as
value=""),- 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.
mplungjan
- 134,906
- 25
- 152
- 209
-
28Also, so that the user can't select the non-option once it has been selected: – coolaj86 Nov 07 '12 at 17:37
-
2That does not make sense... Also it will not work on several browsers – mplungjan Nov 07 '12 at 17:38
-
4
-
17I see 2 downvotes. If you feel like downvoting this **PLEASE** comment as to **WHY** – mplungjan Mar 14 '14 at 09:23
-
@mplungjan I know adding `aria-required="required"` on input fields does help improve support, although I'm unsure about on selects. Thoughts? – darcher Mar 20 '14 at 19:14
-
Interesting, I have not used Aria yet. Did you try? Here is more info https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute – mplungjan Mar 20 '14 at 21:15
-
1
-
@mplungjan If in everyday life there would be only 1% of unhappy people nobody would complain. – Pawel Jan 29 '16 at 02:02
-
-
1You can use the `:valid` css selector to apply a custom style to a select element depending on if the empty value is selected. – hughes Oct 05 '16 at 01:26
-
-
Actually, it's 0 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size and THAT was sucking my day – Daniel Birowsky Popeski Feb 24 '17 at 19:08
-
-
Per the last comment, should this answer be edited to remove the display size 1 requirement? – Andy Mercer Aug 14 '17 at 13:30
-
That is the default - so perhaps I need to say: do NOT specify size unless it it 1 in which case omit it – mplungjan Aug 14 '17 at 14:01
-
A nice trick is to remove the placeholder option on focus of the select. Of course, this would depend greatly on the nature of the form. – MCTaylor17 Nov 06 '17 at 22:45
-
Notice that simply omitting the `value` attribute does not work, you have to include `value=""`. – Flimm Jun 28 '18 at 09:29
-
-
How can I get an error message from this? Like other filed (input) provided. – Rajib karmaker Aug 05 '18 at 02:13
-
@rajibkarmaker add the attribute `required` and the browser generates the error message for you - see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input - your doctype has to be html5 compliant – mplungjan Aug 05 '18 at 04:55
-
Clarification on the `disabled` attribute for the placeholder option: works fine in Safari, but fails in Firefox 74 (the second option element is selected when the page is shown.) – fbitterlich Apr 17 '20 at 14:22
-
@fbitterlich You are referring to the comment where I stated `That does not make sense... Also it will not work on several browsers ` – mplungjan Apr 17 '20 at 15:08
-
1Yes, exactly. I just think it *would* make sense to use, as you could prevent the user from selecting that item. But alas, it doesn't work (consistently.) – fbitterlich Apr 20 '20 at 10:05
13
The <select> element does support the required attribute, as per the spec:
Which browser doesn’t honour this?
(Of course, you have to validate on the server anyway, as you can’t guarantee that users will have JavaScript enabled.)
Paul D. Waite
- 89,393
- 53
- 186
- 261
-
10I am sure he just needed a value="" on the first entry - if there is no value attribute or a value on all options the required fail to trigger because the select returns an actual value – mplungjan May 18 '11 at 18:39
-
1
-
1@PaulD.Waite Can we still not guarantee that users will have Javascript enabled? I've only been in web development about 2 years now and I've never run into that problem. – user137717 Aug 16 '15 at 00:46
-
3@user137717: It’s the web. You can’t guarantee anything. You can, of course, decide that it’s not worth catering for. – Paul D. Waite Aug 17 '15 at 06:35
6
Yes, it's working:
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
you have to keep first option blank.
techraf
- 53,268
- 22
- 149
- 166
pradipgarala
- 361
- 6
- 5
5
You can use the selected attribute for the option element to select a choice by default. You can use the required attribute for the select element to ensure that the user selects something.
In Javascript, you can check the selectedIndex property to get the index of the selected option, or you can check the value property to get the value of the selected option.
According to the HTML5 spec, selectedIndex "returns the index of the first selected item, if any, or −1 if there is no selected item. And value "returns the value of the first selected item, if any, or the empty string if there is no selected item." So if selectedIndex = -1, then you know they haven't selected anything.
<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
function displaySelection()
{
var mySelect = document.getElementById("someSelectElement");
var mySelection = mySelect.selectedIndex;
alert(mySelection);
}
</script>
james.garriss
- 11,468
- 6
- 75
- 94
-
1@Apostle - Please stop trying to change this answer via edits. If you believe it is incorrect, feel free to leave your own answer. – Brad Larson May 19 '15 at 14:57
-
@BradLarson At first I did not quite understand: the code is not a **complete** solution to the problem in this question or is an explanatory example to the last paragraph of this answer. Probably second in this case. I think better to organize this code as a snippet and show the result `-1`. Sorry, I didn't clarify in comments first. – Apostle May 19 '15 at 15:51
1
<form action="">
<select required>
<option selected disabled value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
<input type="submit">
</form>
yatou
- 39
- 1
-
4This answer merely repeats a previous example with no additional explanation. – james.garriss May 19 '15 at 11:05
1
first you have to assign blank value in first option. i.e. Select here.than only required will work.
ayush
- 11
- 2
1
You need to set the value attribute of option to the empty string:
<select name="status" required>
<option selected disabled value="">what's your status?</option>
<option value="code">coding</option>
<option value="sleep">sleeping</option>
</select>
select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input -> raising the required message.
The value attribute specifies the value to be sent to a server when a form is submitted.
JBallin
- 4,767
- 33
- 38
0
Make the value of first item of selection box to blank.
So when every you post the FORM you get blank value and using this way you would know that user hasn't selected anything from dropdown.
<select name="user_role" required>
<option value="">-Select-</option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>
Alok Patel
- 7,184
- 5
- 24
- 44
santosh devnath
- 100
- 5
0
try this, this gonna work, I have tried this and this works.
<!DOCTYPE html>
<html>
<body>
<form action="#">
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
sayyed tabrez
- 74
- 1
- 10
0
Works perfectly fine if the first option's value is null. Explanation : The HTML5 will read a null value on button submit. If not null (value attribute), the selected value is assumed not to be null hence the validation would have worked i.e by checking if there's been data in the option tag. Therefore it will not produce the validation method. However, i guess the other side becomes clear, if the value attribute is set to null ie (value = "" ), HTML5 will detect an empty value on the first or rather the default selected option thus giving out the validation message. Thanks for asking. Happy to help. Glad to know if i did.
-2
In html5 you can do using the full expression:
<select required="required">
I don't know why the short expression doesn't work, but try this one. It will solve.
Roger Rocco
- 5
- 1
-5
Try this
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
user2289459
- 11
-6
You can do it also dynamically with JQuery
Set required
$("#select1").attr('required', 'required');
Remove required
$("#select1").removeAttr('required');
james.garriss
- 11,468
- 6
- 75
- 94
mlqmarkos12
- 120
- 1
- 11