简体   繁体   中英

Check if at least one row is filled

I have 3 rows with 3 inputs in each. What I need is to check if at least in one row all inputs are filled. If one row is filled then we go to other page. There is no difference between which row is filled, it could be even last row. Here's my piece of code:

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

You have a scope issue. return false breaks the $.each part. Check for false after iterating.

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

Something like this should work, not tested, but you'll get the idea.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM