如果任何字段为空，如何禁用提交按钮？

Question

我找到此链接Disable submit if inputs empty jquery 以确保我编写的代码是可以的。它们看起来一样，但是当我执行我的并尝试从最新输入（从下到上，在我的任何表单中）填写表单时，提交按钮被激活。

请问我做错了什么？ 这是我的登录表单代码示例：

$(document).ready( function() {
  $('#login input').on('keyup', function() {
    let empty = false;

    $('#login input.required').each(function() {
      empty = $(this).val().length == 0;
    });

    if (empty)
      $('#login #submit').attr('disabled', 'disabled');
    else
      $('#login #submit').attr('disabled', false);
  });
});

Answer 1

#1 检查您的选择器。像 #login #submit 这样的选择器可能会选择正确的元素，但由于 ID 在 HTML 中必须是唯一的才能使其有效，因此将 #login 放在 #submit 之前是多余的。

#login input.required 应该是#login input[required]。

#2 此外，您的状况也有问题。

$('#login input.required').each(function() {
  empty = $(this).val().length == 0;
});

这基本上只检查你的最后一个元素。如果倒数第二个元素为空，但您的最后一个元素不是您的变量，empty 将是 false，尽管您实际上有空字段。

为避免这种情况，您需要在找到空字段后立即跳出每个循环，或者仅在找到空字段时覆盖变量。

$('#login input.required').each(function() {
  empty = $(this).val().length == 0;
  return false; 
});

#3 总是使用trim() 来检查一个值是否真的为空！

$('input').on('keyup', isValid);

function isValid() {
    let requiredInputs = $('input[required]');
  let emptyField = false;
  $.each(requiredInputs, function() {
    if( $(this).val().trim().length == 0 ) {
        emptyField = true;
        return false;
    }
  });
  if(!emptyField) {
    $('button').attr('disabled', false);
  }else{
    $('button').attr('disabled', true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" required="required" />
<input type="text" />
<input type="text" required="required" />
<input type="text" required="required" />
<button disabled="disabled">
Submit
</button>

Answer 2

使用 jQuery .map() 方法和 Array#some() 方法，您可以在一两步内完成检查。 some() 方法返回boolean 类型的值，可用于设置提交按钮的disabled 属性：

$('input[required]').on('input', function() {
    //Get current values of all required fields
    const vals = $('input[required]').map((i,f) => f.value).get(); //array
    //Is any empty
    const empty = vals.some(v => v.trim() === ''); //boolean
    //set disabled property of submit button
    $('input.submit').prop('disabled', empty);
})
//set initial state of submit button
.first().trigger('input');

$(function() {
    $('input[required]').on('input', function() {
        //Get current values of all required fields
        const vals = $('input[required]').map((i,f) => f.value).get(); //array
        //Is any empty
        const empty = vals.some(v => v.trim() === ''); //boolean
        //set disabled property of submit button
        $('input.submit').prop('disabled', empty);
    })
    //set initial state of submit button
    .first().trigger('input');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" required="required" /><br>
<input type="text" /><br>
<input type="text" required="required" /><br>
<input type="text" required="required" /><br>
<input type="submit" value="Submit" class="submit">
</form>

Answer 3

出于任何原因，

...
empty = $(this).val().length == 0;
...

不起作用，但这样做：

...
if ($(this).val().length == 0) {
    empty = true;
}
...

我在 jsfiddle http://jsfiddle.net/JamesHill/2Cm9p/ 的家伙中检查了它，他使用了第二种形式并且它有效。 所以我理解他的回答之后的评论：

empty = $(this).val().length == 0 与您在 jsfiddle.net 上的示例代码不同，并且它不完全正确，因为空标志仅取决于最后一个输入值

这解释了我的问题。我认为他需要更新他的答案。或者也许有一些我对 jquery 不太了解的东西。 谢谢大家

Answer 4

使用这个循环它会解决你的问题

    for (var i = 0; i < $('input').length-1; i++) {
        empty = $($('input')[i]).val() == 0;
        if (empty == true) {
            break;
        }
    }

不要使用“this”，因为它只获取输入元素，因此您的循环无法正常工作，还有一件事我们不能在每个循环中使用 break，这就是我们在这里使用循环的原因。