爲什麼我在這個變量上得到一個未定義的錯誤？

Question

任何人都可以看到這一點的jQuery代碼有什麼問題嗎？我在變量reqButEmpty上收到undefined錯誤消息，因此它無法正常運行。先謝謝你。

$(document).ready(function(){ 
    $("#btnCatchReqFlds").on('click', function(){ 
     alert('made it to this one also'); 
     var peaches ="hi peaches"; 
     var reqButEmpty = $('fieldset:visible').find('input[class*="-required"]').filter(function() 
      { 
        alert(peaches); 
        alert('second area 1a'); 
        alert(reqButEmpty); 
        return $.trim($(this).val()) === ""; 
      }); 
       alert('second area 1b'); 
        if(reqButEmpty.length>0) 
        { 
         alert("go here ok"); 
         alert(this.length); 
         reqButEmpty.each(function() { 
          $('#hldErrMsg').append("Please fill in the " + this.name + "<br />"); 
         }); 
        } 
        return !reqButEmpty.length; 
       }); 
     }); 

的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="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" 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" rows="2" style="width: 433px"></textarea></td> 
        </tr> 
       </table> 
          </fieldset> 


</form>​ 

jQuery代碼：

<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(){ 
     console.log('inside onclick of button'); 
     var peaches ="hi peaches"; 
     var reqButEmpty = $('fieldset:visible').find('input[class*="-required"]').filter(function() 
      { 
        console.log(peaches); 
        console.log('inside var reqButEmpty assignment'); 
        console.log(reqButEmpty); 
        return $.trim($(this).val()) === ""; 
      }); 
       console.log('just after var reqButEmpty assignment'); 
        if(reqButEmpty.length>0) 
        { 
         console.log("inside .length"); 
         console.log(this.length); 
         reqButEmpty.each(function() { 
          $('#hldErrMsg').append("Please fill in the " + this.name + "<br />"); 
         }); 
        } 
        return !reqButEmpty.length; 
       }); 
     }); 

     </script> 

Answer 1

這裏：

$(function() { 
    var $button = $('#btnCatchReqFlds'); 
    var $message = $('#holdErrMsg'); 

    $button.on('click', function() { 
     var $reqButEmpty = $('input[class*="-required"]', 'fieldset:visible').filter(function() { 
      return $.trim($(this).val()) === ''; 
     }); 

     var html = $reqButEmpty.map(function() { 
      return 'Please fill in the ' + this.name; 
     }).get().join('<br>'); 

     $message.html(html); 
    }); 
}); 

現場演示：http://jsfiddle.net/jYBPY/3/

順便說一句，你在你的代碼有一個錯字 - 你寫"#hldErrMsg"，而不是"#holdErrMsg"。