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

也许 .each() 是正确的轨道，但我将其应用于错误的元素？

下面是循环的表单域：

<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 函数内进行检查，而 each 函数内的 return false; 只会让你脱离函数，所以你可能不得不做这样的事情

$("#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;
});