Значение проверки поданной формы, возвращающее пустое

Я настраиваю форму с несколькими полями, и я хочу проверить перед отправкой, я просто проверяю, что входные поля не пусты моя проблема заключается в том, что мой сценарий обходит тест if и идет прямо в функцию else.

<div id="personalInfo" class="col-lg-6 col-lg-offset-3">
<div class="acc_info_q"> <a data-toggle="collapse" data-target="#personal_info"><i class="fa fa-plus"></i> Personal Information</a> 
  <span id="stats2" class="fieldStatus pull-right">
    <i class="fa"></i> &nbsp;</span></div>

    <div id="personal_info"> 
      <div class="col-sm-6 control-group">
          <input type="text" class="form-control" name="address" id="address" placeholder="Address">
        </div>
      <div class="col-sm-6 control-group">
          <input type="text" class="form-control" name="city" id="city" placeholder="City">
        </div>  
      <div class="clearfix"></div>
  <div class="text-center">
    <hr>
    <button type="button" value="next" class="next1">Next</button>
  </div>
    </div>
    <!-- end of collapsed -->
    </div>

эта форма имеет 2 поля и при щелчке скрипт должен посмотреть на входные поля и проверить значение, если теперь значение он добавляет FA-times класс еще он добавляет fa-check класс, их проблема в том, что если пропускает if и он идет прямо к else вот код JS

$('.next1').click(function() {
  var value = $(this).parent().find("input").filter(function() {
    return this.value === "";
  });
  console.log("value.length" +value.length)
  if (value.length) {
    //At least one input is empty
    $('#stats2').find('i').addClass('fa-times');
  } else {
    $('#stats2').find("i").removeClass('fa-times').addClass('fa-check')
     
   
  }
});

вот кодепен я даже добавил консоль.log and it возвращает 0, когда поля пусты, и он должен вернуть 2

codepen

1 ответ

  1. Вместо этого следует использовать idселектор .parent()(который в вашем случае является .text-centerи не имеет inputэлементов)

    var value = $('#personal_info').find("input").filter(function() {
        return this.value === "";
    });