Проверка формы 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, а 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;
});