動態添加行的jQuery表單驗證

Question

我有一個表單，用戶可以將系統名稱添加到項目中。所有表單域都是必需的。我以爲我可以只是

$("#btnSave").live("click", function() { 
var today = new Date(); 
var submitReady = 0; 
if ($(".location").val() == '') 
{ 
alert('The location was not selected for one of the systems.'); 
var submitReady = 1 
return false; 
} 

但它只捕獲第一個系統名稱上的錯誤。理想情況下，我想通知用戶錯過了哪些系統名稱，但可能會晚一些。我確定我需要使用.each（），但我不確定在何處或如何包含它。

我嘗試了以下代替上面的if語句，但它在頁面加載時產生了錯誤。

if ($(".location").each(function(index){$(this).val() == '')}) 
    { 
     alert('No location was specified'); 
     return false; 
    } 

也許。每個（）是在正確的軌道，但我把它應用到了錯誤的元素？

下面是被環表單字段：

<cfloop query="rsRequestSystems"> 
<table cellpadding="3" class="tablesorter"> 
    <tr> 
     <th class="form"><label>System Name</label></th> 
     <td><input name="systemname" type="text" class="systemname" value="#rsRequestSystems.systemname#" size="50" maxlength="50"> 
      <div class="SystemNameStatus" style="color:##0000FF"></div></td>    
     <th class="form"><label>Location</label></th> 
     <td><select class="location" name="location"> 
       <option></option> 
       <cfloop query="rsLocations"> 
        <option value="#rsLocations.optionValue#" <cfif rsRequestSystems.location eq rsLocations.optionValue>selected</cfif> >#rsLocations.optionDesc#</option> 
       </cfloop> 
      </select></td> 
     <td rowspan="2" align="center"> 
      <button type="button" class="fg-button ui-state-default ui-corner-all remove_SystemName" style="width:70px;">Remove</button> 
      <button type="button" class="fg-button ui-state-default ui-corner-all check_SystemName" style="width:70px;">Check</button></td> 
    </tr> 
    <tr> 
     <th class="form"><label>Platform/Model</label></th> 
     <td> <select class="platform" name="platform"> 
       <option ></option> 
       <cfloop query="rsPlatform"> 
        <option value="#rsPlatform.optionValue#" <cfif rsRequestSystems.platform eq rsPlatform.optionValue>selected</cfif>>#rsPlatform.optionValue# - #rsPlatform.optionDesc#</option> 
       </cfloop> 
      </select> 
      &nbsp;/&nbsp; 
      <select class="model" name="model"> 
       <option selected></option> 
       <cfloop query="rsModels"> 
        <option value="#rsModels.optionValue#" <cfif rsRequestSystems.model eq rsModels.optionValue>selected</cfif>>#rsModels.optionDesc#</option> 
       </cfloop></select></td> 
     <th class="form" nowrap><label>Estimated Go Live</label></th> 
     <td><input type="text" name="goLive" class="datepicker goLive" value="#dateformat(rsRequestSystems.golive,'mm/dd/yyyy')#" size="10"></td> 
    </tr> 

</table> 

Answer 1

你的想法很拼，但你必須做的each函數內部檢查和return false;內each功能只有打破你出去的功能，所以你可能需要做這樣的事情

$("#btnSave").live("click", function() { 
    var retVal = true; 
    $(".location").each(function(index){ 
    if($(this).val() == '') 
    { 
     alert('No location was specified'); 
     $(this).focus(); 
     retVal = false; 
     return false; 
    } 
}); 

return retVal; 
});