Question

我有3行，每行3个输入。我需要检查是否至少在一行中填写所有输入。如果填充了一行，那么我们转到其他页面。填充哪一行没有区别，甚至可能是最后一行。这是我的代码：

             <div class="div-rows row-1">
                <input name="kfz_first_name" type="text" placeholder="Vorname" data-input="1"/>
                <input name="kfz_last_name" type="text" placeholder="Nachname" data-input="1"/>
                <input name="kfz_birthday" class="datepicker" type="text" placeholder="Geburtsdatum" data-input="1"/>
                <div class="clear"></div>
            </div>
            <div class="div-rows row-2">
                <input name="kfz_first_name" type="text" placeholder="Vorname" data-input="2"/>
                <input name="kfz_last_name" type="text" placeholder="Nachname" data-input="2"/>
                <input name="kfz_birthday" class="datepicker" type="text" placeholder="Geburtsdatum" data-input="2"/>
                <div class="clear"></div>
            </div>
            <div class="div-rows row-3">
                <input name="kfz_first_name" type="text" placeholder="Vorname" data-input="3"/>
                <input name="kfz_last_name" type="text" placeholder="Nachname" data-input="3"/>
                <input name="kfz_birthday" class="datepicker" type="text" placeholder="Geburtsdatum" data-input="3"/>
                <div class="clear"></div>
            </div>
            <br/>
            <a href="#" class="x-btn">click</a>

        var zaza = true;
        $('.div-rows input').each(function(){
            if ($.trim($(this).val()) == "") {
                $(this).addClass('red-border');
                zaza = false;
            }
            if (zaza == false) {
                return false;
            }
        });

Answer 1

您有范围问题。 return false打破$.each部分。迭代后检查是否为假。

var zaza = true;
$('.div-rows input').each(function(){
    if ($.trim($(this).val()) == "") {
        $(this).addClass('red-border');
        zaza = false;
    }
});
if (zaza == false) {
    return false;
}

Answer 2

这样的事情应该有效，而不是经过测试，但你会明白这一点。

$(document).ready(function() { 
  $(document).on('click', '.x-btn', function() { 
    var canContinue= true;

    $('.div-rows').each(function() { 
      var allInRowsAreEmpty = true;

      $('input', $(this)).each(function() { 
        if($(this).val() != '') { // $(this) = the current input in the current .div-rows
          allInRowAreEmpty = false;
        }
      });

      if(allEmpty) {
        $(this).addClass('your-error-class'); // $(this) is the current .div-rows
        canContinue= false;
      }
    });

    if(canContinue) {
      // do your thing
    }
  }
});

检查是否至少填充了一行

2 个答案: