Requiring to make a selection from a drop down html 5

C

2

6

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?

Cabot answered 17/10, 2012 at 16:14 Comment(5)

Add an extra option, eg <option>-- Select an option --</option>. Your current desire has a small oversight: How would the user pick Volvo, if the browser has to reject the default option? – Inherent 17/10, 2012 at 16:18

Lets say I did make the default option <option>-- Select an option --</option> and the user tried to submit without changing that option would it not submit "-- Select an option --"? – Cabot 17/10, 2012 at 16:26

Yes. You would check that at the server's side (obviously), and request new input if it's invalid. – Inherent 17/10, 2012 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? – Cabot 17/10, 2012 at 16:40

You don't need to look up the value. Check if the selectedIndex property of the <select> element is greater than zero. – Inherent 17/10, 2012 at 16:42

C

1

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/

Carmagnole answered 14/10, 2018 at 13:31 Comment(0)

E

1

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

Eiger answered 17/10, 2012 at 16:51 Comment(0)

C

1

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/

Carmagnole answered 14/10, 2018 at 13:31 Comment(0)

Recommended topics

Hot tags