使用jQuery验证动态创建的div

Question

I am adding div dynamically with having multiple input tag to a div having id="lessonDetails". I am trying to validate it with jquery, code is as below :

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;
                    }
                });

            });
        });
    }
}

It's not working correctly. It gives more than one alert at time.

Answer 1

You don't need multiple each() , Modify the validate function as

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;
}

Use the return value

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

Answer 2

$(this).each( doesn't makes any sense.

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

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

I am finding all the nested 'input[name="addlesson"]' and iterating over them, rest of the logic is same so this will do the trick.