Как проверить поле на заполненность?

296

21 сентября 2017, 15:48

Имеется форма, нужно проверить ее на заполненность полей.
Кнопка отправки блокируется пока не будут заполнены все поля.

Но после того как я ввожу текст в поле, она все равно остается неактивной.
Подозреваю это из-за того что $(document).ready(function ()

Как при этом изменить на change, скажем, не пойму.
И через функцию пробовал onkeyup="check();, тоже не совсем понятная логика получается (проект не я писал, поэтому пока не могу объяснить почему)

$(document).ready(function () { 
  $('.btn-reg').addClass('disabled-btn'); 
  var fio = $('.pickup_cdek #order_order_address_attributes_city').val(); 
 
  if(fio.length != '') { 
    $('.btn-reg').removeClass('disabled-btn'); 
  } else { 
    $('.btn-reg').click(function(){ 
     
    if($('.btn-reg').hasClass('disabled-btn')){ 
      // подсвечиваем незаполненные поля и форму не отправляем, если есть незаполненные поля 
      $('.pickup_cdek #order_order_address_attributes_city').addClass('empty'); 
      setTimeout(function(){ 
        $('.pickup_cdek').find('.require').removeClass('empty'); 
      },1500); 
        return false 
      } else { 
        // Все хорошо, все заполнено, отправляем форму 
        return true 
      } 
    }); 
  } 
});

.disabled-btn {cursor: default !important;background: #b3b3b3} 
.empty {border-color: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tr> 
  <td class="ltd"> 
  <label for="order_order_address_attributes_city">Город <i>*</i></label> 
  </td> 
  <td> 
    <div class="pickup_cdek"> 
      <div class="ui-widget" style="z-index: 1; top: 104.438px; left: 137.734px; display: block;"> 
        <input class="ent-inp require" id="order_order_address_attributes_city" name="order[order_address_attributes][city]" >  
      </div> 
    </div> 
  </td> 
</tr> 
 
<div class="reg-f"><table><tbody><tr class="reg-col"><td class="ltd">&nbsp;</td><td><input class="btn-reg disabled-btn" name="commit" type="submit" value="Подтвердить"></td></tr></tbody></table></div>

Answer 1

$(document).ready(function () {
var fio = $('.pickup_cdek #order_order_address_attributes_city');
$('html').on('keyup keydown change', fio, function(){
    if(fio.val().length != '') $('.btn-reg').removeClass('disabled-btn');
    else  $('.btn-reg').addClass('disabled-btn');
})

Answer 2

Просто замените на свои поля и добавьте сколько Вам нужно новых!

(function($) { 
 
  $(function() { 
 
    $('.rf').each(function() { 
      var form = $(this), 
        btn = form.find('.btn_submit'); 
      form.find('.rfield').addClass('empty_field'); 
 
      function checkInput() { 
        form.find('.rfield').each(function() { 
          if ($(this).val() != '') { 
            $(this).removeClass('empty_field'); 
          } else { 
            $(this).addClass('empty_field'); 
          } 
        }); 
      } 
 
      function lightEmpty() { 
        form.find('.empty_field').css({ 
          'border-color': '#d8512d' 
        }); 
 
        setTimeout(function() { 
          form.find('.empty_field').removeAttr('style'); 
        }, 500); 
      } 
 
      setInterval(function() { 
 
        checkInput(); 
 
        var sizeEmpty = form.find('.empty_field').size(); 
 
        if (sizeEmpty > 0) { 
          if (btn.hasClass('disabled')) { 
            return false 
          } else { 
            btn.addClass('disabled') 
          } 
        } else { 
          btn.removeClass('disabled') 
        } 
      }, 500); 
 
      btn.click(function() { 
        if ($(this).hasClass('disabled')) { 
 
          lightEmpty(); 
          return false 
        } else { 
 
          form.submit(); 
        } 
      }); 
    }); 
  }); 
 
})(jQuery);

.form_box { 
  width: 300px; 
  margin: 40px auto; 
} 
 
.form_box label { 
  font-size: 13px; 
  font-weight: bold; 
  color: #444444; 
  display: block; 
} 
 
.form_box input { 
  display: block; 
  border: 2px solid #cfcfcf; 
  font-size: 14px; 
  color: #444444; 
  padding: 7px 7px 8px; 
  width: 250px; 
  margin-bottom: 20px; 
  transition: all 0.5s; 
  -webkit-transition: all 0.5s; 
  -moz-transition: all 0.5s; 
} 
 
.form_box input:focus { 
  outline: none; 
  border-color: #07a6e6; 
} 
 
.form_box .btn_submit { 
  border: none; 
  width: 180px; 
  text-align: center; 
  background: #07a6e6; 
  font-size: 13px; 
  font-weight: bold; 
  color: #ffffff; 
  cursor: pointer; 
  height: 35px; 
  line-height: 28px; 
  padding: 0; 
} 
 
.form_box .btn_submit:hover { 
  background: #009ac2; 
} 
 
.form_box .btn_submit:active { 
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); 
} 
 
.form_box .btn_submit.disabled, 
.form_box .btn_submit.disabled:hover { 
  background: #afdde6; 
  cursor: default; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form_box"> 
  <form action="#" method="post" class="rf"> 
 
    <label for="user_town">Город:</label> 
    <input type="text" class="rfield" id="user_town" /> 
 
    <label for="user_adress">Адресс</label> 
    <input type="text" class="rfield" id="user_adress" /> 
 
    <input type="submit" class="btn_submit disabled" value="Отправить данные" /> 
 
  </form> 
</div>