jQuery - 檢查某個部分中的所有必填字段是否已被回答

Question

我需要對Lightbox popUp運行檢查以查看是否所有非可選字段都已輸入。

HTML

<div id="manualAddressEntry01" class="container popUp large hidden shadow02 rounded03"> 
    <div class="popUpHeading"> 
     <h4>Please enter your full address:</h4> 
    </div> 
    <div class="popUpContent rounded03"> 
     <img class="closeContainer cursor" src="resource/nw/images/hires/helpClose.gif"/> 
     <div class="fl"> 
      <label for="form_popup1_HouseName">House Number/Name</label> 
      <input class="jsValid_required" id="form_popup1_HouseName" type="text" size="25"/> 
     </div> 

     <div class="fl" style="padding-left:10px"> 
      <label for="form_popup1_Street">Street</label> 
      <input class="jsValid_required" id="form_popup1_Street" type="text" size="25"/> 
     </div> 

     <br class="cb"/> 

     <input id="form_popup1_AddressLine2" type="text" size="35"/> 

     <label for="form_popup1_TownCity">Town/City</label> 
     <input class="jsValid_alpha" id="form_popup1_TownCity" type="text" size="35"/> 

     <label for="form_popup1_County">County</label> 
     <input class="jsValid_alpha jsOptional countyInput" id="form_popup1_County" name="text" type="text" size="35"/> 

     <label for="form_popup2_Country">Country</label> 
     <select class="countrySelect" name="select" id="form_popup1_CountryList"> 
      <option value="AF">Afghanistan</option> 
      <option value="AL">Albania</option> 
     </select> 

     <label for="form_p">Postcode</label> 
     <input class="jsOptional" id="form_popup1_PostCode" type="text" size="10" maxlength="8"/> 
     <img class="cursor submit confirmAllInputs" src="confirmBTN2.gif" id="confirmManualAddressEntry01" style="margin-bottom:-5px;"/> 
     <br/> 
    </div> 
</div> 

我需要做 我能走遠路，並通過ID檢查每個輸入字段，並複製此，改變ID對每個以這種形式彈出 - 但我想寫一些jQuery，當點擊彈出窗口底部的".confirmAllInputs"按鈕時，它會找到".container"中沒有類jsOptional的所有輸入字段，並檢查這些輸入字段是否全部輸入。如果不是，應該顯示錯誤消息，否則，它全部被接受。

我試過一些東西。我得到的最接近的是：

$('.confirmAllInputs').click(function(){ 
    var container = $(this).parents('.container'); 
    var optionalFields = (container.find('input[class!=jsOptional]').val()); 
    $(container).each(function(i){ 
     alert('These are the value of the fields: ' + optionalFields); 
    }); 
}); 

但是，這隻報告第一個字段的值。我需要循環所有，並檢查它們不是空的。

Answer 1

這將不具有類jsOptional以及其中value是"".find()投入。

$('.confirmAllInputs').click(function() { 
    var missingRequired = $(this).closest('.container') 
           .find('input[class!=jsOptional][value=""]'); 
    if (missingRequired.length) { 
     alert('there were required fields that were not completed'); 
    } 
}); 

如果missingRequired.length比0越大，alert()會火。如果需要，您可以遍歷missingRequired集合。

missingRequired.each(function() { 
    alert(this.id + ' is required.'); 
}); 

或者創建一個可以使用的ID的完整字符串。

var str = missingRequired.map(function() { 
    return this.id; 
}).get().join(", "); 

alert("These are required: " + str); 

Answer 2

$('.confirmAllInputs').click(function(){ 
    var container = $(this).parents('.container'); 
    var optionalFields = (container.find('input[class!=jsOptional]').val()); 
    var szMessage = ""; 
    $(container).each(function(i){ 
     szMessage += <YOUR_MESSAGE> ; 
    } 
    alert(szMessage); 
);