Требование сделать выбор из выпадающего HTML 5

Можно ли заставить / требовать от пользователя сделать выбор из выпадающего меню? Пример:

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

По умолчанию выбран "Вольво". Я хочу, чтобы браузер знал, что пользователь сделал выбор, и не принял автоматическое значение по умолчанию.

Я думаю что-то вроде этого:

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

Любой совет?

Источник

2 ответа

Много времени прошло с тех пор, как вопрос был опубликован. Для любого, кто споткнулся об этом, как я, решение стало намного проще: вы можете просто добавить первую опцию в выборку без заданного значения. Браузер автоматически воспримет это как "ничего не выбрано":

<!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 показывает, что он работает без дополнительной JS: https://jsfiddle.net/nrs5a7qh/

Источник

Я подправил пример из jquery validate, чтобы заставить это работать на вас. Я знаю, что в вашем первоначальном вопросе вы просили, чтобы он был основан на HTML5, но, возможно, этот смешанный пример приемлем.

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>

Оригинальный пример был на http://docs.jquery.com/Plugins/Validation

Источник
Другие вопросы по тегам