使用jQuery驗證動態創建的div

Question

我將動態多個輸入標籤添加到具有id =「lessonDetails」的div的div中。我試圖用jQuery來驗證它，代碼如下：

HTML：

<div id="lessonDetails"> 
    <div class="greenshades"> 
     <input name="addlesson"/> 
     <input name="addsubject"/> 
    </div> 
    <div class="greenshades"> 
     <input name="addlesson"/> 
     <input name="addsubject"/> 
    </div> 
    <div class="greenshades"> 
     <input name="addlesson"/> 
     <input name="addsubject"/> 
    </div> 
</div> 
<input type="button" onclick="validate()"/> 

的jQuery：

function validate() { 
    if ($('#lessonDetails').children().length > 0) { 

     $('#lessonDetails').children().each(function(){ 

      $(this).each(function() {    

       $('input[name="addlesson"]').each(function() { 
        if($(this).val() == "") { 
         alert("Please enter lesson title."); 
         return false; 
        } 
       }); 

       $('input[name="addsubject"]').each(function() { 
        if($(this).val() == "") { 
         alert("Please enter subject."); 
         return false; 
        } 
       }); 

      }); 
     }); 
    } 
} 

它不能正常工作。它在一次提供多個警報。

Answer 1

$(this).each(沒有任何意義。

$('#lessonDetails').find('input[name="addlesson"]').each(function() { 

    if ($(this).val() == "") { 
    alert("Please enter lesson title."); 
    return false; 
    } 
}); 

我發現所有的嵌套'input[name="addlesson"]'並遍歷它們，邏輯的其餘部分是相同的，所以這將這樣的伎倆。

Answer 2

你不需要多each()，修改驗證功能

function validate() { 
    var valid = true; 
    $('#lessonDetails input[name="addlesson"]').each(function() { 
     if ($(this).val() == "") { 
      alert("Please enter lesson title."); 
      valid = false; 
      return false; //break loop only 
     } 
    }); 
    return valid; 
} 

使用返回值

<input type="button" onclick="return validate()"/>