如果输入为空jquery,则禁用提交

Question

免责声明:我知道有很多关于这个主题的问题并且已得到高度解决,尽管在我的特定情况下我需要帮助.

我试图检查键盘上的输入值是否为空,然后禁用提交按钮.

我的HTML代码段:

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" />
    </div>
  </form>
</div>

我从这里使用了示例答案并进行了一些修改:

(function() {
    $('.field input').keyup(function() {

        var empty = false;
        $('.field input').each(function() {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('.actions input').attr('disabled', true);
        } else {
            $('.actions input').attr('disabled', false);
        }
    });
})()

任何帮助将不胜感激!

Answer 1

我建议默认禁用该按钮.我也会查看长度,而.val()不是检查空字符串.最后,我认为document.ready()比现有代码更具可读性:以下是完整代码:

HTML

<div class='form'>
  <form>
    <div class='field'>
      <label for="username">Username</label>
      <input id="username" type="text" />
    </div>
    <div class='field'>
      <label for="password">Password</label>
      <input id="password" type="password" />
    </div>
    <div class='actions'>
      <input type="submit" value="Login" disabled="disabled" />
    </div>
  </form>
</div>?

JS/jQuery的

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

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

    if (empty)
      $('.actions input').attr('disabled', 'disabled');
    else
      $('.actions input').attr('disabled', false);
  });
});

这是一个工作小提琴.