jquery：このスクリプトでチェックボックスとラジオの検証を追加するにはどうすればよいですか？

Question

私はいくつかの特別な検証コードが必要なクライアント用のアプリを開発中です。私は近づいているが、私はチェックボックスとラジオボタンの確認に固執している。私は以下のコードを使用して、可視フィールドセット内の必須フィールドを見つけてフィルタリングしています。

私はこの同じjqueryのfind/filterに自分の入力：チェックボックスフィールドを含めることができますが、チェックとラジオ​​の検証は[return $ .trim（$（this））.val（）== = ""]。私はをいない取得する必要がどのようにいくつか：発見/フィルターと私のエラーメッセージに結果を含める

どのように私は/チェックを選択し、まだ必要でないため、検証/ /検索を追加含めることができますに含まをチェックしますチェックボックスとラジオボタンのフィールド？

私のjQuery：[注は、第三document.readyはかつて私が働いているある]：

<script type="text/javascript"> 
      $(document).ready(function() { 
       $('fieldset#section-11,fieldset#section-12,fieldset#section-13').hide(); 
      });//end of close all fieldsets 


      $(document).ready(function() { 
       var projType = new Array(
         {value : 'Cars', sect_id : 'fieldset#section-11'}, 
         {value : 'Planes', sect_id : 'fieldset#section-12'}, 
         {value : 'Boats', sect_id : 'fieldset#section-13'} 
        ); //end of projType array 

      $("select#1169").on('change',function() { 
       var dropDownVal = $(this).val(); 
       var sect_id =""; 
        $(projType).each(function() { 
         $(this.sect_id).hide(); //hide all section each time you run thru here 
          if(this.value == dropDownVal) 
           { 
            $(this.sect_id).show(); 
           } 
        }); 
      }); 
      }); 
$(document).ready(function(){ 
    $("#btnCatchReqFlds").on('click', function(){ 
     $("#holdErrMsg").empty(); 
     var reqButEmpty = $('fieldset:visible').find('input[type="text"][class*="-required"],textarea[class*="-required"],select[class*="-required"]').filter(function() 
      { 
        return $.trim($(this).val()) === ""; 
      }); 
        if(reqButEmpty.length>0) 
         { 
          reqButEmpty.each(function() { 
           $('#holdErrMsg').append("Please fill in the " + this.name + "<br />"); 
          }); 
         } 
        return !reqButEmpty.length; 
       }); 
     }); 

     </script> 

私のhtml >>作ら

<form method="post" action=""> 
    <div id="holdErrMsg"></div> 
    <fieldset id="mainSection" name="mainSection"> 
       <legend style="color:blue; font-weight:bold">Project Overview Section</legend> 

       <table style="width: 100%"> 
        <tr> 
         <td style="height: 33px; width: 178px;">Name</td> 
         <td style="height: 33px"><input id="1125" name="1125" class="1125-required" type="text" /></td> 
        </tr> 
        <tr> 
         <td style="height: 33px; width: 178px;">Email</td> 
         <td style="height: 33px"><input id="1026" name="1026" class="1026-required" type="text" /></td> 
        </tr> 
        <tr> 
         <td style="width: 178px">Product Title</td> 
         <td><input id="1089" name="1089" type="text" /></td> 
        </tr> 
        <tr> 
         <td style="width: 178px">Product Type</td> 
         <td><select id="1169" name="1169"> 
         <option value="">Select</option> 
         <option value="Cars">Cars</option> 
         <option value="Boats">Boats</option> 
         <option value="Planes">Planes</option> 
         </select></td> 
        </tr> 
             <tr><td> 
             <button id="btnCatchReqFlds" type="button" name="btn">Check Required Fields</button> 
             </td></tr> 
            </table> 
      </fieldset> 

      <fieldset id="section-11" name="section-11"> 
       <legend style="color:fuchsia; font-weight:bold">Car Details Section</legend> 

       <table cellpadding="2" style="width: 100%"> 
        <tr> 
         <td style="width: 334px; height: 35px"><label>Size:*</label></td> 
         <td style="height: 35px"><input id="1245" class="1245-required" name="1245" type="text" /></td> 
        </tr> 
        <tr> 
         <td style="height: 35px; width: 334px">Color:*</td> 
         <td style="height: 35px"> 
         <select id="1433" class="1433-required" name="1433"> 
         <option value="">Select</option> 
         <option value="Orange">Orange</option> 
         <option value="Blank">Blank</option> 
         <option value="Green">Green</option> 
      </select></td> 
        </tr> 
        <tr> 
         <td style="width: 334px">Description:</td> 
         <td> 
         <textarea id="1290" name="1290" class="1290-required" rows="2" style="width: 433px"></textarea></td> 
        </tr> 
       </table> 
          </fieldset> 

      <fieldset id="section-12" name="section-12"> 
       <legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend> 

       <table cellpadding="2" style="width: 100%"> 
        <tr> 
         <td style="width: 334px; height: 35px"><label>Size:</label></td> 
         <td style="height: 35px"><input id="1245" name="1245" type="text" /></td> 
        </tr> 
        <tr> 
         <td style="height: 35px; width: 334px">Color*:</td> 
         <td style="height: 35px"> 
               <input type="checkbox" name="1433[]" id="1433[]" value="Orange" class="1433[]-required"/>Orange 
               <input type="checkbox" name="1433[]" id="1433[]" value="Blue" class="1433[]-required"/>Blue 
               <input type="checkbox" name="1433[]" id="1433[]" value="Green" class="1433[]-required"/>Green 
         </td> 
        </tr> 
        <tr> 
         <td style="width: 334px">Description:</td> 
         <td> 
         <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td> 
        </tr> 
       </table> 
          </fieldset> 
      <fieldset id="section-13" name="section-13"> 
       <legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend> 

       <table cellpadding="2" style="width: 100%"> 
        <tr> 
         <td style="width: 334px; height: 35px"><label>Size:</label></td> 
         <td style="height: 35px"><input id="1245" name="1245" type="text" /></td> 
        </tr> 
        <tr> 
         <td style="height: 35px; width: 334px">Color:*</td> 
         <td style="height: 35px"> 
               <input type="radio" name="1834[]" id="1834[]" value="None" class="valuetext" class="1834[]-required">None 
               <input type="radio" name="1834[]" id="1834[]" value="All" class="valuetext" class="1834[]-required">All 
         </td> 
        </tr> 
        <tr> 
         <td style="width: 334px">Description:</td> 
         <td> 
         <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td> 
        </tr> 
       </table> 
          </fieldset><br> 
<fieldset id="section-1011" name="section-1011"> 
       <legend style="color:green; font-weight:bold">Misc Info Section</legend> 

       <table cellpadding="2" style="width: 100%"> 
        <tr> 
         <td style="width: 334px; height: 35px"><label>Size:</label></td> 
         <td style="height: 35px"><input id="1301" name="1301" type="text" /></td> 
        </tr> 
        <tr> 
         <td style="height: 35px; width: 334px">Color:</td> 
         <td style="height: 35px"> 
         <select id="1302" name="1302"> 
       <option value="Orange">Orange</option> 
         <option value="Blank">Blank</option> 
         <option value="Green">Green</option> 
      </select></td> 
        </tr> 
        <tr> 
         <td style="width: 334px">Description:</td> 
         <td> 
         <textarea id="1303" name="1303" class="1303-required" rows="2" style="width: 433px"></textarea></td> 
        </tr> 
       </table> 
          </fieldset> 


</form>​ 
     <?php 
     // put your code here 
     ?> 
    </body> 
</html> 

Answer 1

Hiya デモhttp://jsfiddle.net/MfVJT/

ここからデモ検証プラグイン http://jsfiddle.net/9jSGN/

を使用して

少し余分簡単なデモ今では、コードの中で、あなたの検証のために1433年、すなわちチェックボックスを検出します。私にお知らせください。

だけの提案 :)私はあなたがあなたの必要性のために再書き込み検証プラグインですが、ここで見てint型になってくださいかどうかわからないです。このことができますhttp://docs.jquery.com/Plugins/Validation/

希望を、私はそれがどのようになる教えてください、これは問題を解決しなければならない問題は、フィールドのクローズタグを設定していた。

$("#signupForm").validate({ 
    rules:{ 
     termsConditions : "required" 
    } 

});