动态添加行的jQuery表单验证

时间:2011-03-11 17:05:01

标签: jquery validation forms dynamic

我有一个表单,用户可以在其中向系统添加系统名称。所有表单字段都是必填字段。我以为我可以

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

1 个答案:

答案 0 :(得分: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;
});