jquery验证每个输入值_Jquery_Each_Onchange

jquery验证每个输入值

jquery

jquery验证每个输入值,jquery,each,onchange,Jquery,Each,Onchange,我试图获取div中多个输入的值，一旦div中的所有输入都有值，控制台就会记录一条消息。只要父div中的所有输入都有一个值，我就需要这个消息我摆好了小提琴 jQuery $（函数（）{ //name=row1，show=row2，item 1=null，item 2=null，item 3=test，success=false $（'div.items:first'）.show（）； $（'div.items'）.children（'input'）.on（'change'，function（）

我试图获取div中多个输入的值，一旦div中的所有输入都有值，控制台就会记录一条消息。只要父div中的所有输入都有一个值，我就需要这个消息

我摆好了小提琴


jQuery
$（函数（）{
//name=row1，show=row2，item 1=null，item 2=null，item 3=test，success=false
$（'div.items:first'）.show（）；
$（'div.items'）.children（'input'）.on（'change'，function（））{
var parent=$（this.parent（'div'）。data（'name'）；
var path=$（this）.parent（'div'）.data（'show'）；
$（this）.parent（'div.items'）。children（'.required'）。each（函数（索引）{
if（$（this.val（）！=“”）{
console.log（'ok'）；
}
});
});
});
.项目{
显示：无；
}

试试看

演示：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>jQuery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // name = row1, show = row 2, item 1 = null, item 2 = null, item 3 = test, success = false
            $('div.items:first').show();
            $('div.items').children('input').on('change', function(){
                var parent = $(this).parent('div').data('name');
                var path = $(this).parent('div').data('show');
                $(this).parent('div.items').children('.required').each(function (index) {
                    if ($(this).val() != '') {
                        console.log('ok');
                    }
                });
            });
        });
    </script>
    <style type="text/css">
        .items {
            display: none;
        }
    </style>
</head>
<body>
    <div class="items" data-name="row1" data-show="row2">
        <input type="text" class="required" />
        <input type="text" class="required" />
        <input type="text" class="required" />
    </div>
    <div class="items" data-name="row2" data-show="row3">
        <input type="text" class="required" />
        <input type="text" class="required" />
        <input type="text" class="required" />
    </div>
    <div class="items" data-name="row3" data-show="buttonholder">
        <input type="text" class="required" />
        <input type="text" class="required" />
        <input type="text" class="required" />
    </div>
</body>
</html>

$('div.items:first').show();
$('div.items').children('input').on('change', function(){
    var parent = $(this).parent('div').data('name');
    var path = $(this).parent('div').data('show');
    var valid = true;
    $(this).parent('div.items').children('.required').each(function (index) {
        if ($(this).val() == '') {
            valid = false;
            return false;
        }
    });
    if(valid){
        console.log('ok')
    }
});