web-dev-qa-db-ja.com

HTML5の<select>フィールドにrequired属性を適用できますか？

ユーザーがHTML5の<select>フィールドから何かを選択したかどうかどうすれば確認できますか？

<select>は新しいrequired属性をサポートしていないようです…それではJavaScriptを使用する必要がありますか？または足りないものはありますか。 ：/

javascripthtml5selectrequired
241
Matt

必須：最初の値を空にする - 空の値に対して必須の動作

前提条件：正しいhtml5 DOCTYPEと名前付き入力フィールド

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

ように ドキュメント （リストと太字は私のものです）

必須属性はブール属性です。
指定された場合、ユーザーはフォームを送信する前に値を選択する必要があります。

選択要素の場合

  • 必須の属性が指定されています。
  • 複数の属性が指定されていません。
  • 1の表示サイズを持ちます（SIZE = 2以上は必要ありません。必要でなければ省略してください）。
  • そして、select要素のオプションリスト（もしあれば）の最初のoption要素の値が空の文字列の場合（つまりvalue=""として存在）
  • そして、そのoption要素の親ノードはselect要素です（optgroup要素ではありません）。

その場合、そのオプションはselect要素のプレースホルダラベルオプションです。

448
mplungjan

仕様に従って、<select>要素はrequired属性をサポートします。

どのブラウザはこれを尊重しませんか？

（もちろん、ユーザーがJavaScriptを有効にしていることを保証できないので、とにかくサーバーで検証する必要があります。）

13
Paul D. Waite

Option要素にselected属性を使用して、デフォルトで選択肢を選択できます。 select要素にrequired属性を使用して、ユーザーが確実に何かを選択できるようにすることができます。

Javascriptでは、selectedIndexプロパティをチェックして選択したオプションのインデックスを取得するか、valueプロパティをチェックして選択したオプションの値を取得できます。

HTML5の仕様によると、selectedIndex "は最初に選択されたアイテムのインデックスがあればそれを返し、選択されたアイテムがなければ-1を返します。そしてvalue"は最初の選択アイテムの値を返します、もしあれば、または選択された項目がなければ空の文字列。 "つまり、selectedIndex = -1の場合、何も選択されていないことがわかります。

<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>
5
james.garriss

はい、それは働いています：

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

あなたは最初のオプションを空白のままにしなければなりません。

3
pradipgarala

最初にあなたは最初のオプションで空白値を割り当てる必要があります。つまりここを選択してください。必要なものだけが動作します。

1
ayush

これを試して、この仕事をするつもりです、私はこれを試してみましたそしてこの作品。

<!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>
0
sayyed tabrez

valueのoption属性を空の文字列に設定する必要があります。

<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は、ユーザーがvalueのoptionを押すと、選択されたsubmitのformをサーバーに返します。空のvalueは、空のtext input - > requiredメッセージを表示するのと同じです。

w3schools

Value属性は、フォームが送信されたときにサーバーに送信される値を指定します。

例

0
JBallin

選択ボックスの最初の項目の値を空白にします。

したがって、FORMを投稿するたびに空白の値が表示され、この方法を使用すると、ユーザーがドロップダウンから何も選択していないことがわかります。

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>
0
santosh devnath
<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>
0
yatou