동적으로 추가 된 행에 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; 
});