动态添加行的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; 
});