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

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? :/

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.

The <select> element does support the required attribute, as per the spec:

• http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

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.)

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.

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>

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.

---

w3schools > The value attribute specifies the value to be sent to a server when a form is submitted. > > Example

<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>

first you have to assign blank value in first option. i.e. Select here.than only required will work.

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>

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>

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.

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.

Try this

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

You can do it also dynamically with JQuery

Set required

$("#select1").attr('required', 'required');

Remove required

$("#select1").removeAttr('required');