43

jquery の検証プラグインを使用してフォームを検証しようとしています。フォームを送信するには、ユーザーがグループ内の少なくとも 1 つのチェックボックスをオンにする必要があります。これが私のjqueryコードです：

$().ready(function() {
$("#subscribeForm").validate({
   rules:   { list: {required: "#list0:checked"} },
   messages:  { list:  "Please select at least one newsletter"}                                                        
 });
 });

html フォームは次のとおりです。

<form action="" method="GET" id="subscribeForm">
<fieldset id="cbgroup">
    <div><input name="list" id="list0" type="checkbox"  value="newsletter0" >zero</div>
    <div><input name="list" id="list1" type="checkbox"  value="newsletter1" >one</div>
    <div><input name="list" id="list2" type="checkbox"  value="newsletter2" >two</div>
</fieldset>
<input name="submit" type="submit"  value="submit">

問題は、何もチェックされていない場合でもフォームが送信されることです。どうすればこれを解決できますか?

4

11 に答える 11

52 
  $('#subscribeForm').validate( {
      rules: {
          list: {
              required: true,
              minlength: 1
          }
       }
   });

これにより、少なくとも1つがチェックされるようになると思います。

于 2009-11-18T21:29:38.340 に答える
32

以下のこのスクリプトは、おそらくあなたを正しい軌道に乗せるはずですか？

このhtmlを同じに保つことができます（メソッドをPOSTに変更しましたが）：

<form method="POST" id="subscribeForm">
    <fieldset id="cbgroup">
        <div><input name="list" id="list0" type="checkbox"  value="newsletter0" >zero</div>
        <div><input name="list" id="list1" type="checkbox"  value="newsletter1" >one</div>
        <div><input name="list" id="list2" type="checkbox"  value="newsletter2" >two</div>
    </fieldset>
    <input name="submit" type="submit"  value="submit">
</form>

そしてこのjavascriptは検証します

function onSubmit() 
{ 
    var fields = $("input[name='list']").serializeArray(); 
    if (fields.length === 0) 
    { 
        alert('nothing selected'); 
        // cancel submit
        return false;
    } 
    else 
    { 
        alert(fields.length + " items selected"); 
    }
}

// register event on form, not submit button
$('#subscribeForm').submit(onSubmit)

ここでその実例を見つけることができます

更新（2012年10月）さらに、チェックボックスには「name」プロパティが必要
であることに注意してください。そうでない場合、チェックボックスは配列に追加されません。「id」だけでは機能しません。

更新（2013年5月）
送信登録をjavascriptに移動し、送信をフォームに登録しました（元々のはずでした）

更新（2016年6月）
変更==から===

于 2009-10-08T02:53:47.990 に答える
12

これはどう：

$(document).ready(function() {
    $('#subscribeForm').submit(function() {
        var $fields = $(this).find('input[name="list"]:checked');
        if (!$fields.length) {
            alert('You must check at least one box!');
            return false; // The form will *not* submit
        }
    });
});
于 2009-10-08T03:05:59.500 に答える
9

上記の Lod Lawson による addMethod は完全には正しくありません。$.validate ではなく $.validator であり、バリデータ メソッド名 cb_selectone には引用符が必要です。私がテストした修正版は次のとおりです。

$.validator.addMethod('cb_selectone', function(value,element){
    if(element.length>0){
        for(var i=0;i<element.length;i++){
            if($(element[i]).val('checked')) return true;
        }
        return false;
    }
    return false;
}, 'Please select at least one option');
于 2011-02-19T23:18:06.810 に答える
6

jquery 検証プラグインを使用して複数のチェックボックスを検証するための簡単なソリューションを次に示します。

jQuery.validator.addMethod('atLeastOneChecked', function(value, element) {
  return ($('.cbgroup input:checked').length > 0);
});

$('#subscribeForm').validate({
  rules: {
    list0: { atLeastOneChecked: true }
  },
  messages: {
    list0: { 'Please check at least one option' }
  }
});

$('.cbgroup input').click(function() {
  $('#list0').valid();
});
于 2011-07-17T09:59:49.430 に答える
2 
if (
  document.forms["form"]["mon"].checked==false &&
  document.forms["form"]["tues"].checked==false &&
  document.forms["form"]["wed"].checked==false &&
  document.forms["form"]["thrs"].checked==false &&
  document.forms["form"]["fri"].checked==false
) {
  alert("Select at least One Day into Five Days");
  return false; 
}
于 2013-09-11T16:53:06.460 に答える
1

カスタム検証メソッドを使用せず、メタデータ プラグインと追加の html を使用した良い例です。

Jquery.Validate プラグイン作成者によるデモ

于 2012-06-14T10:13:20.080 に答える
0

私は同じことをしなければなりませんでした。これは私が書いたものです。チェックするチェックボックスのグループが複数あるので、私の場合はより柔軟にしました。

// param: reqNum number of checkboxes to select
$.fn.checkboxValidate = function(reqNum){
    var fields = this.serializeArray();
    return (fields.length < reqNum) ? 'invalid' : 'valid';
}

次に、この関数を渡して、複数のルールを持つチェックボックスの複数のグループをチェックできます。

// helper function to create error
function err(msg){
    alert("Please select a " + msg + " preference.");
}

$('#reg').submit(function(e){
    //needs at lease 2 checkboxes to be selected
    if($("input.region, input.music").checkboxValidate(2) == 'invalid'){
        err("Region and Music");
    } 
});
于 2012-06-28T03:13:19.557 に答える
0

これはどう

$.validate.addMethod(cb_selectone,
                   function(value,element){
                           if(element.length>0){
                               for(var i=0;i<element.length;i++){
                                if($(element[i]).val('checked')) return true;
                               }
                           return false;
                           }
                            return false;
                  },
                  'Please select a least one')

今、あなたはすることができます

$.validate({rules:{checklist:"cb_selectone"}});

コールバック関数で3番目のPARAMで選択する最小数をさらに指定することもできます。まだテストしていないので、それが機能するかどうか教えてください。

于 2010-09-30T08:13:49.367 に答える
0

私はわずかに異なるシナリオを持っていました。私のチェックボックスは動的に作成され、同じグループではありませんでした。しかし、少なくともそれらのいずれかをチェックする必要がありました。私のアプローチ (これが完璧だとは決して言いません)、私はそれらすべてに対して一般的なバリデーターを作成しました:

jQuery.validator.addMethod("validatorName", function(value, element) {
    if (($('input:checkbox[name=chkBox1]:checked').val() == "Val1") ||
        ($('input:checkbox[name=chkBox2]:checked').val() == "Val2") ||
        ($('input:checkbox[name=chkBox3]:checked').val() == "Val3")) 
    {   
        return true;
    }
    else
    {
        return false;
    }       
}, "Please Select any one value");

ここで、各チェックボックスをこの 1 つのバリデーターに関連付ける必要がありました。

ここでも、チェックボックスのいずれかがクリックされてバリデーターがトリガーされたときに、検証をトリガーする必要がありました。

$('#piRequest input:checkbox[name=chkBox1]').click(function(e){
    $("#myform").valid();
});
于 2012-07-11T04:55:12.653 に答える