CODEWITHSUNDEEP
javascriptjquery
Roman Kiriluck
Roman Kiriluck

Reputation: 79

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

Upvotes: 0

Views: 365

Answers (2)

Ben
Ben

Reputation: 11188

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

Upvotes: 1

Lars Graubner
Lars Graubner

Reputation: 837

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

Upvotes: 1

Related Questions