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()，将验证功能修改为

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

Answer 2

$(this).each(没有任何意义。

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

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

我找到所有嵌套的'input[name="addlesson"]'并迭代它们，其余的逻辑是相同的，这样就可以了。

使用jquery验证动态创建的div

2 个答案: