Can I apply the required attribute to fields in HTML5?

How can I check if a user has selected something from a doesn’t support the new required attribute… do I have to use JavaScript then? Or is there something I’m missing? :/


Solution 1:

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>

As per the documentation (the listing and bold is mine)

The required attribute is a boolean
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

then that option is the
select element’s placeholder label

Solution 2:

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

Solution 3:

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>
    function displaySelection()
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;

Solution 4:

Yes, it’s working:

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>

you have to keep first option blank.

Solution 5:

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

Solution 6:

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

<input type="submit">