javascript - 检查以确保所有字段均已填写 Jquery

Question

我正在尝试在 jquery 中为我的输入字段创建一个简单的验证器。 目前我得到以下内容:

function checkInputs(){
var isValid = true;
$('.input-required').each(function() {
     if($(this).val() === ''){
        isValid = false;
         return false;
     }        
 });
return isValid;
}

然后我得到了一个按钮，那就是:

$('#confirm').click(function () { 
    alert(checkInputs());
});

但即使输入为空，它也始终返回 true。 此外，在完成此工作之后，如果填写了所有输入，将启用一个按钮以供单击。

对其进行了编辑，使其现在有一个选择器，但仍然始终为 true。

提前致谢

Answer 1

尝试使用过滤器属性来获取具有 required 的输入属性。

$('input').filter('[required]')

添加了代码来检查输入是否已填充并启用或禁用 button 。请注意，如果我们使用这个，$('#confirm').click(function()); 就没有什么意义了。功能，因为只有当输入被填充时此按钮才会启用。

function checkInputs() {
  var isValid = true;
  $('input').filter('[required]').each(function() {
    if ($(this).val() === '') {
      $('#confirm').prop('disabled', true)
      isValid = false;
      return false;
    }
  });
  if(isValid) {$('#confirm').prop('disabled', false)}
  return isValid;
}

$('#confirm').click(function() {
  alert(checkInputs());
});

//Enable or disable button based on if inputs are filled or not
$('input').filter('[required]').on('keyup',function() {
checkInputs()
})

checkInputs()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input required>
  <input required>
  <input required>
  <button id="confirm">check</button>
</form>