Requiring to make a selection from a drop down html 5

Question

Is it possible to force/require a user to make a selection from a drop down menu? Example:

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

By default "Volvo" is selected. What I want is for the browser to know that the user has made a selection and not accept the auto default.

I am thinking something like this:

<form action="">
<select name="cars" required="required">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

Any advice?

Add an extra option, eg ``. Your current desire has a small oversight: How would the user pick Volvo, if the browser has to reject the default option? — Rob W, Oct 17 '12 at 16:18
Lets say I did make the default option and the user tried to submit without changing that option would it not submit "-- Select an option --"? — Austin Lovell, Oct 17 '12 at 16:26
Yes. You would check that at the server's side (obviously), and request new input if it's invalid. — Rob W, Oct 17 '12 at 16:28
I am going to assume that required="required" will not work. I will have to do js check and reject the input if it equals "-- Select an option --". Is this correct? — Austin Lovell, Oct 17 '12 at 16:40
You don't need to look up the value. Check if the `selectedIndex` property of the ` — Rob W, Oct 17 '12 at 16:42

score 1 · Answer 1 · answered Oct 17 '12 at 16:51

I tweaked an example from jquery validate to get this working for you. I know in your original question you asked for it to be based in HTML5 but maybe this blended example is acceptable.

http://jsfiddle.net/36MkJ/

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <script>
        $(document).ready(function(){
            $("#carsForm").validate();
        });
    </script>
</head>
<body>
<form class="cmxform" id="carsForm" method="get" action="">
    <select name="cars" class="required">
        <option value="">Select a car</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat">Fiat</option>
        <option value="audi">Audi</option>
    </select>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

Original Example was on http://docs.jquery.com/Plugins/Validation

score 1 · Accepted Answer · answered Oct 14 '18 at 13:31

A lot of time has passed since the question was posted. For anybody stumbling over this like I did, the solution became a lot simpler by now: You can just add a first option to the selection, with no value set. The browser will automatically treat this like "nothing was selected":

<!DOCTYPE html>
<html>
  <body>
    <form>
      <select required>
        <option value="">Please select</option>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
      </select>
      <input type="submit"/>
    </form>
  </body>
</html>

JSFiddle showing it work with no further JS required: https://jsfiddle.net/nrs5a7qh/

Requiring to make a selection from a drop down html 5

2 Answers2