Форма подтвержденного значения формы, возвращающая пустой

Question

Я создаю форму с несколькими полями, и я хочу проверить ее перед отправкой. Я просто проверяю, что поля ввода не пусты. Моя проблема заключается в том, что мой скрипт обходит тест 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 поля и нажмите скрипт должны выглядеть на поле ввода и проверьте значение, если сейчас значения его добавляет к.-а.-кратный класс еще это добавляет фа проверочного класса, их проблема в том, что если пропускает, если и он идет прямо к еще здесь код 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') 
 
     
 
    
 
    } 
 
});

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

codepen

Answer 1

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

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