javascript - 检查输入在每个类元素上是否具有值，然后切换禁用的类 jQuery

Question

我正在尝试检查表单中每个输入元素的值。它不起作用。有人可以帮助我我在这里做错了什么吗？谢谢

<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>

function formIsInvalid() {
  var flag = false,
    name, date;
  $('.form--group').each(function() {

    name = $(this).find('.thename').val();
    date = $(this).find('.date_of_birth').val().length == 10;
    if (name == "" || date == "") {
      flag = true;
    }
  });
  return flag
}

//Toggle disbaled class
$('.form--group').on('keyup','input', function() {
  //use other static element or document if not works
  $('#stepbirth').toggleClass('disabled', formIsInvalid());
});

Answer 1

您可以使用.trim()方法删除值开始处的所有可用空间。并检查值是否存在。

实例:https://codepen.io/miladfm/pen/ZgKqNm

HTML

<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date date_of_birth" name="date[]" />
</div>
<div class="form--group">
    <input class="thename" name="name[]" type="text" />
    <input type="text" class="date_of_birth" name="date[]" />
</div>
<a href="javascript:;" id="stepbirth" class="btn disabled">Next step</a>

CSS

#stepbirth.disabled {
  color: #999;
}

JS

function formIsInvalid() {
  var isFormInvalid = false;
  $('.form--group').each(function() {

    var name = $(this).find('.thename').val();
    var date = $(this).find('.date_of_birth').val();

    if (!name.trim() || !date.trim()) {
      isFormInvalid = true;
    }
  });

  return isFormInvalid
}

$('.form--group').on('keyup','input', function() {
  $('#stepbirth').toggleClass('disabled', formIsInvalid());
});