2012-02-23 15 views
0

すべて、 フォームを送信する前に、少なくとも1つのチェックボックスがjQuery Validatorでチェックされていることを確認しようとしています。私は、チェックボックスのために次のコードをお持ちの場合:少なくとも1つのチェックボックスがjQuery Validatorでチェックされています

<input type="checkbox" value="23" class="select" name="vendor_categories[]">&nbsp;Test1<br /> 
<input type="checkbox" value="8" class="select" name="vendor_categories[]">&nbsp;Test2<br /> 
<input type="checkbox" value="9" class="select" name="vendor_categories[]">&nbsp;Test3<br /> 
<input type="checkbox" value="2" class="select" name="vendor_categories[]">&nbsp;Test4<br /> 

をそれから私は、次のjQueryコードを持っている:

$("#register_vendor").validate({ 
    ignore: "", 
    rules: { 
     vendor_email: { 
      required: true, 
      email: true 
     }, 
     vendor_name: "required", 
     zip: { 
      required: true, 
      digits: true, 
      minlength: 5 
     } 
    }, 
    messages: { 
     vendor_email: { 
      required: "<br>Please enter an email address!<br><br>", 
      email: "<br>Please enter a valid email address!<br><br>" 
     }, 
     vendor_name: "<br>Please enter your vendor name!<br><br>", 
     zip: { 
      required: "<br>Please enter a zip code!<br><br>", 
      digits: "<br>You can only enter in numbers for the zipcode!<br><br>", 
      minlength: "<br>The zip code has to be atleast 5 digits!<br><br>" 
     } 
    }, 
    invalidHandler: function(e, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 
       ? 'You missed 1 field. It has been highlighted below' 
       : 'You missed ' + errors + ' fields. They have been highlighted below'; 
      alert(message); 
     } 
     $('.togDesc').show(); 
    } 
}); 

私は

+0

あなたは非常に簡単に行うことができ、jQueryのバリデータを使用していなかった場合:! '場合(document.querySelector(" [名= 'vendor_categories [] ']:checked "))falseを返す;' –

答えて

3

が見カスタム検証機能書くだだろうか。

if(0 === $('input.select:checked').size()){ 
    // Error condition 
} 

...結果がエラーとなります。サイドノート: "select"というクラスのチェックボックス入力を持つと、混乱します。

0

ドキュメントを読んだ後は、「必須」プロパティ用に独自のコールバックハンドラを作成できるように見えます。これを単純なselectステートメントと組み合わせると、(うまくいけば)かなり簡単になります。私はこれをテストすることができないんだけど、これをやってみる:

$("#register_vendor").validate({ 
    ignore: "", 
    rules: { 
     vendor_email: { 
      required: true, 
      email: true 
     }, 
     vendor_name: "required", 
     zip: { 
      required: true, 
      digits: true, 
      minlength: 5 
     }, 
     category_selected: { 
      required: function(elem) 
      { 
       return $("input.select:checked").length > 0; 
      } 
     } 
    }, 
    messages: { 
     vendor_email: { 
      required: "<br>Please enter an email address!<br><br>", 
      email: "<br>Please enter a valid email address!<br><br>" 
     }, 
     vendor_name: "<br>Please enter your vendor name!<br><br>", 
     zip: { 
      required: "<br>Please enter a zip code!<br><br>", 
      digits: "<br>You can only enter in numbers for the zipcode!<br><br>", 
      minlength: "<br>The zip code has to be atleast 5 digits!<br><br>" 
     } 
    }, 
    invalidHandler: function(e, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 
       ? 'You missed 1 field. It has been highlighted below' 
       : 'You missed ' + errors + ' fields. They have been highlighted below'; 
      alert(message); 
     } 
     $('.togDesc').show(); 
    } 
}); 
関連する問題