Question

还有其他一些线索提出这个问题，但我认为我的问题略有不同。

我正在尝试创建一个最初禁用提交按钮的表单，当表单完成后，该按钮将变为启用状态。经过一段时间的努力，我发现了一个帖子，我将以下代码建模：

$('input, textarea, select').blur(function()
{
  if( !$(this).val() ) {
    $('#submit').removeAttr('disabled');
  }
});

我很快意识到这不会起作用，因为在此代码中，“this”仅指您刚刚离开的输入标记，而不是一次所有的输入标记。如何一次引用所有input，select和textarea标签以检查它们是否都不为空？

另外，我制作表单的方式是并非所有输入框都会立即出现。有些输入不适用于对某个问题回答“否”的人，因此我使用jquery上下滑动来摆脱它们等。最初这些标签没有显示。我是否必须修改此jquery函数以检查这些输入是否也为空？

Answer 1

只需循环浏览您要检查的所有元素：

$('input, textarea, select').blur(function() {
  var valid = true;
  $('input, textarea, select').each(function() {
    if (!$(this).is(':visible')) return true; // check if element is displayed
    if( !$(this).val() ) {
      valid = false;
      return false; // form is not valid so no need to go any further
    }
  });

  if (valid) {
    $('#submit').removeAttr('disabled');
  }
});

修改

关于隐藏的输入字段。

添加额外的检查以查看元素是否可见。

请记住也要经常检查服务器端！

Answer 2

一种非常优雅的IMO方法是使用可用于查找空元素的自定义伪选择器。首先，使用：

添加它

$.expr[':'].novalue = function(a) { return $(a).val().length === 0; };

然后，当您需要测试所有输入是否为非空（可能在$(':input').blur(...)）时，

if ($(':input:novalue', form_element).length === 0) {
   // All the inputs has a value
   $('#submit').removeAttr('disabled');
} else {
   // Some of the inputs are empty
}

（form_element是...... well，<form>元素）

Answer 3

$('input, textarea, select').blur(function(){
    checkSubmit();
});

function checkSubmit() {
    var $vals = $('input:not([type="submit"]), textarea, select');
    var $total = $vals.size();
    var $count = 0;
    $vals.each(function(){
        if(!$this).val()) {
            $count++;
        }
    });
    if ($total === $count) {
        $('#submit').removeAttr('disabled');
    }
}

阅读你的编辑，我想你会想要继续进行提交而不是像这样的事情的验证设置，这可能比仅仅验证字段更困难。但是，要回答您的上一个问题，是的，您需要调整查询（请注意我对input[type="submit"]的调整）。

使用jquery检查表单输入是否为空

3 个答案: