检查以确保所有字段都已填写 Jquery答案

【问题标题】：Check to make sure all fields are filled Jquery检查以确保所有字段都已填写 Jquery
【发布时间】：2017-07-09 21:34:26
【问题描述】：

我正在尝试在 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。同样在完成这项工作后，如果所有输入都填写完毕，将启用一个按钮来点击。

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

提前致谢

【问题讨论】：

你有一个错字是你的代码，也许你的意思是 $('.input-required')。
哦该死的你是对的，添加它！但仍然总是返回 true

标签： javascript jquery validation input

【解决方案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>

【讨论】：

【解决方案2】：

尝试以这种方式定位元素： $('input[required]')

这应该可以解决问题。

【讨论】：

【解决方案3】：

如果为0，则所有输入都被填充，否则返回0，表示任何一个或多个为空输入。

 function checkInputs(){
  var flag = 0;
  $('input').each(function() {
       if($(this).val() == ''){
         return flag = 1;
       }
   });
  return flag;
  }
  $('#confirm').click(function () {
      alert(checkInputs());
  });

【讨论】：

【解决方案4】：

您的选择器正在寻找一个显然不存在的 tagName <input-required></input-required>。

为类添加点前缀

也可以使用filter()来简化

function checkInputs(){
    return !$('.input-required').filter(function() {
         return !this.value;   
     }).length;
}

注意：如果收音机或复选框是该类元素集合的一部分，则它们将无法在收音机或复选框上使用，如果是这种情况，您需要为类型添加条件

【讨论】：

【解决方案5】：

你忘了在 jQuery 中添加类符号：

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

  return isValid;
}

试试这个..

【讨论】：