jQuery Form Validation on Dynamically added rows

I have a form where users can add system names to a project. All the form fields are required. I thought I could just

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

but it only catches the error on the first system name. Ideally I'd like to notify the user which system name they missed but that can come later. I'm sure I'll need to use .each() but I'm not sure where or how to include it.

I tried the following in place of the if statement above but it produced an error on page load.

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

Perhaps the .each() is the right track but I'm applying it to the wrong element?

Below is the form fields that are looped:

<cflo开发者_如何学Cop 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>

---

Your idea is quite fight but you must do the checking inside the each function and a return false; inside the each function only breaks you out of the function so you might have to do something like this

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