javascript - 使用 jquery 验证动态创建的 div

Question

我正在动态添加 div，并将多个输入标记添加到 id="lessonDetails"的 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

不需要多个each()，将validate函数修改为

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()"/>