web-dev-qa-db-ja.com

選択ボックスを検証

JQueryプラグイン Validation を使用してフォームを検証しています。次のような選択リストがあります。

<select id="select">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

ここで、ユーザーが「オプションの選択」（デフォルト）以外のものを選択するようにします。最初のオプションを選択しても検証されないように。これをどのように行うことができますか？

javascriptjqueryhtmlvalidationforms
54
ponjoh

必要なクラスを選択に追加するだけです

<select id="select" class="required">
71
redsquare

まず、ユーザーが誤ってオプションを選択することを「無効化」できます。

<option value="" disabled="disabled">Choose an option</option>

次に、JavaScriptイベント内で（jQueryかJavaScriptかは関係ありません）、フォームが設​​定されているかどうかを検証するために、次のようにします。

select = document.getElementById('select'); // or in jQuery use: select = this;
if (select.value) {
  // value is set to a valid option, so submit form
  return true;
}
return false;

またはその効果のための何か。

20
Jeremy Visser

質問が行われたとき（2009）にプラグインがどのようになったかはわかりませんが、今日は同じ問題に直面し、次のように解決しました。

  1. 選択タグに名前属性を付けます。この場合の例

    _<select name="myselect">_

  2. タグオプションで属性value = "default"を使用する代わりに、Jeremy Visserの提案に従ってデフォルトオプションを無効にするか、value = ""を設定します。

    _<option disabled="disabled">Choose...</option>_

    または

    _<option value="">Choose...</option>_

  3. プラグイン検証ルールを設定する

    $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

    または

    _<select name="myselect" class="required">_

Obs：redsquareのソリューションは、フォームで選択したものが1つだけの場合にのみ機能します。彼のソリューションが複数の選択で動作するようにするには、選択に名前属性を追加します。

それが役に立てば幸い！ :)

5
Pedro Paulo Mendes Pereira
<select id='bookcategory' class="form-control" required="">
                    <option value="" disabled="disabled">Category</option>
                    <option value="1">LITERATURE & FICTION</option>
                    <option value="2">NON FICTION</option>
                    <option value="3">ACADEMIC</option>
            <option value="4">CHILDREN & TEENS</option>

                </select>

HTMLフォームの検証は、ブラウザーによって自動的に実行できます。上記のコードを試してください：
残りはすべて自動的に行われ、このドロップダウンと送信ボタンだけでjs関数を作成する必要はありません。

3
Gurmeet Singh

ユーザーが「オプションの選択」（デフォルト）以外を選択するようにします。最初のオプションを選択しても検証されないように。これをどのように行うことができますか？

これを行うには、selectタグにrequired = "required"属性を追加するだけです。あなたは以下のコードでそれを見ることができます

<select id="select" required="required">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

Chorme、firefox、Internet Explorerでうまく動作しました。ありがとう

0
Varun Vardhan
if (select == "") {
    alert("Please select a selection");
    return false;

それはあなたのために働くはずです。それはちょうど私のためにやった。

0
M. Ray

おそらくより短い方法がありますが、これは私にとってはうまくいきます。

<script language='JavaScript' type='text/javascript'>
    function validateThisFrom(thisForm) {
        if (thisForm.FIELDNAME.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME.focus();
            return false;
        }
        if (thisForm.FIELDNAME2.value == "") {
            alert("Please make a selection");
            thisForm.FIELDNAME2.focus();
            return false;
        }
    }
</script>
<form onSubmit="return validateThisFrom (this);">
    <select name="FIELDNAME" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
    <select name="FIELDNAME2" class="form-control">
        <option value="">- select -</option>
        <option value="value 1">Visible info of Value 1</option>
        <option value="value 2">Visible info of Value 2</option>
    </select>
</form>
0
Marina