web-dev-qa-db-ja.com

jquery validateチェック少なくとも1つのチェックボックス

私はこのようなものを持っています：

<form>
<input name='roles' type='checkbox' value='1' />
<input name='roles' type='checkbox' value='2' />
<input name='roles' type='checkbox' value='3' />
<input name='roles' type='checkbox' value='4' />
<input name='roles' type='checkbox' value='5' />
<input type='submit' value='submit' />
<form>

少なくとも1つのチェックボックス（ロール）をチェックする必要があることを検証したいのですが、jquery.validateで可能ですか？

javascriptjqueryjquery-validate
56
Omu

Validateプラグインはcurrent/focused要素のみを検証します。したがって、すべてのチェックボックスを検証するには、バリデーターにカスタムルールを追加する必要があります。上記の答えに似ています。

$.validator.addMethod("roles", function(value, elem, param) {
   return $(".roles:checkbox:checked").length > 0;
},"You must select at least one!");

要素について：

<input class='{roles: true}' name='roles' type='checkbox' value='1' />

さらに、エラーメッセージが表示される可能性がありますが、十分ではありません。 1つのチェックボックスのみが強調表示され、1つのメッセージのみが表示されます。別のチェックボックスをクリックすると、2番目のチェックボックスに対して有効が返されますが、元のチェックボックスは無効としてマークされ、フォームが有効であってもエラーメッセージが表示されます。この場合、私は常に自分でエラーを表示して非表示にすることに常に頼っています。その後、バリデーターはフォームを送信しないように注意します。

あなたが持っている他のオプションは、チェックボックスのクリックで非表示入力の値を「有効」に変更する関数を記述し、非表示要素に検証ルールを添付することです。ただし、これはonSubmitイベントでのみ検証されますが、適切なタイミングでメッセージを表示および非表示にします。これらは、検証プラグインで使用できる唯一のオプションです。

お役に立てば幸いです！

39
menzies

https://github.com/ffmike/jquery-validate の例

 <label for="spam_email">
     <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" validate="required:true, minlength:2" /> Spam via E-Mail </label>
 <label for="spam_phone">
     <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" /> Spam via Phone </label>
 <label for="spam_mail">
     <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" /> Spam via Mail </label>
 <label for="spam[]" class="error">Please select at least two types of spam.</label>

Javascriptのみを使用したタグの「validate」フィールドなしの場合：

$("#testform").validate({ 
    rules: { 
            "spam[]": { 
                    required: true, 
                    minlength: 1 
            } 
    }, 
    messages: { 
            "spam[]": "Please select at least two types of spam."
    } 
});

入力に別の名前が必要な場合は、次のようなsomethigを使用できます。

<input type="hidden" name="spam" id="spam"/>
<label for="spam_phone">
    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam_phone" /> Spam via Phone</label>
<label for="spam_mail">
    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam_mail" /> Spam via Mail </label>

Javascript：

 $("#testform").validate({ 
    rules: { 
        spam: { 
            required: function (element) {
                var boxes = $('.checkbox');
                if (boxes.filter(':checked').length == 0) {
                    return true;
                }
                return false;
            },
            minlength: 1 
        } 
    }, 
    messages: { 
            spam: "Please select at least two types of spam."
    } 
});

入力の前に非表示の入力を追加し、チェックボックスが選択されていない場合は「必須」に設定しました

102
sir_neanderthal

うーん最初にあなたのid属性は一意でなければなりません、あなたのコードは

<form>
<input class='roles' name='roles' type='checkbox' value='1' />
<input class='roles' name='roles' type='checkbox' value='2' />
<input class='roles' name='roles' type='checkbox' value='3' />
<input class='roles' name='roles' type='checkbox' value='4' />
<input class='roles' name='roles' type='checkbox' value='5' />
<input type='submit' value='submit' />
</form>

あなたの問題について：

if($('.roles:checkbox:checked').length == 0)
  // no checkbox checked, do something...
else
  // at least one checkbox checked...

ただし、JavaScriptフォームの検証は単なる指標であり、すべての検証はサーバー側で行わなければならないことに注意してください。

11
Romain Deveaud
$("#idform").validate({
    rules: {            
        'roles': {
            required: true,
        },
    },
    messages: {            
        'roles': {
            required: "One Option please",
        },
    }
});
6
Barno

これは私が過去にどのように対処したかです：

$().ready(function() {                                                      
    $("#contact").validate({
        submitHandler: function(form) {
            // see if selectone is even being used
            var boxes = $('.selectone:checkbox');
            if(boxes.length > 0) {
                if( $('.selectone:checkbox:checked').length < 1) {
                    alert('Please select at least one checkbox');
                    boxes[0].focus();
                    return false;
                }
            }
            form.submit();
        }
    }); 

});
4
Kenrick Buchanan

チェックボックスの横にテキストを表示したい可能性が高いです。その場合、次のようにラベル内にチェックボックスを配置できます。

<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="72" aria-required="true" class="error"> All Over</label>
<label style="width: 150px;"><input type="checkbox" name="damageTypeItems" value="73" aria-required="true" class="error"> All Over X2</label>

問題は、エラーメッセージが表示されると、チェックボックスの後、テキストの前に挿入されるため、読みにくくなることです。それを修正するために、エラー配置関数を変更しました。

if (element.is(":checkbox")) {
    error.insertAfter(element.parent().parent());
}
else {
    error.insertAfter(element);
}

それはレイアウトに依存しますが、私がしたことは、チェックボックスコントロールに特別なエラー配置をすることです。ラベルであるチェックボックスの親を取得し、次に私の場合はdivであるチェックボックスの親を取得します。このようにして、エラーはチェックボックスコントロールのリストの下に配置されます。

2
Francisco Goldenstein

sir_neanderthal はすでにいい答えを投稿しています。

入力に別の名前を使用したい場合は、（またはメソッドをコピーするだけでも）require_from_group method公式jQuery Validationからadditional-methods.js（ バージョン1.13.1のCDNへのリンク ） 。

2
betatester07

input-name[]は、ルールセット内では逆コンマになっています。その部分を理解するのに何時間もかかった。

$('#testform').validate({
  rules : {
    "name[]": { required: true, minlength: 1 }
  }
});

詳細はこちら... http://docs.jquery.com/Plugins/Valid...ets.2C_dots.29

0
user2060616