Question

我有一个包含多个输入的HTML表单。有些人有班级required。

我想要显示＆＃34;提交＆＃34;按钮一旦所有这些字段都有值。

我尝试使用：

$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {
        if($(this).val() !== "") {
            $("#submit_button").show();
        } else {
            $("#submit_button").hide();
        }
    });
});

但如果只有一个输入不是空白，则会显示该按钮。

一旦required类的所有输入都不为空，是否可以对多个输入执行此操作？

CheckRequired 功能

function CheckRequired(event) {
    var $form = $(this);

    var emptyElements = $form.find('.required').filter(function() {
        return this.value === ''
    });

    if(emptyElements.length > 0) {
        event.preventDefault();

        emptyElements.addClass("EmptySelect").attr('title', 'This field is required');

        //alert(emptyElements.attr("id"));
        alert("One or more fields cannot be blank");

        event.stopImmediatePropagation();
        return false;
    }
}

Answer 1

您必须使用循环检查keyup上的所有必需输入：

<script type="text/javascript">
$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {
        var showBtn = true;
        // Check all inputs
        $('.required').each(function () {
            showBtn = showBtn && ($(this).val() !== "");
        }
        // Hide or show the button according to the boolean value
        $("#submit_button").toggle(showBtn);
    });
});
</script>

Answer 2

逻辑很简单：

假设我们会显示按钮。
查看每个必需的输入。
如果其中任何一个为空，我们需要隐藏按钮，而不需要再检查任何输入。

不要只看keyup。这不会捕获通过鼠标/等粘贴的数据。我也会注意change和blur，以确保安全。

$(document).ready(function() {
  // show submit button *only* when all
  // .required fields have a value
  //
  var checkRequired = function() {
    var allValid = true;   // assume we're ready

    $('.required').each(
      function() {
        if (this.value.trim() === "") {
          // fail as soon as we hit an empty field
          allValid = false;
          return false;    // this ends the each() loop
        }
      }
    );

    $('#submit_button').toggle(allValid);
  }

  $('.required').bind('keyup change blur', checkRequired);
  
  checkRequired();  // start off in a correct state
});

.required {
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" class="required" />
  <input type="text" />
  <input type="text" class="required" />
  <input type=submit id=submit_button value="Submit" />
</form>

请注意，我们在启动时调用checkRequired()，因此如果字段已有值，我们会正确显示该按钮。

Answer 3

试试这样：

<script type="text/javascript">
  $(document).ready(function() {
    $("#submit_button").hide();

  $('.required').each('keyup', function () {
    if($(this).val() !== "") {
        $("#submit_button").show();
    } else {
        $("#submit_button").hide();
    }
  });
});
</script>

Answer 4

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var flag = true;
            $('.required').keyup(function () {
                $('.required').each(function (index, responce) {
                    if ($(this).val() == "") {
                        flag = false;
                        return;
                    }
                    else {
                        flag = true;
                    }
                });
                if (flag == true) {
                    $('#submit').show();
                }
                else {
                    $('#submit').hide();
                }
            });
        });
    </script>
</head>
<body>
    <input type="text" name="name" value="" class="required" />
    <input type="text" name="name" value="" class="required" />
    <input type="text" name="name" value="" class="required" />
    <input type="text" name="name" value="" class="required" />
    <input type="text" name="name" value="" class="required" />
    <input type="submit" id="submit" style="display:none;" />
</body>

</html>

Answer 5

用户通常一次不能访问多个控件。更重要的是，事件一次处理一个。因此，您只需使用计数器检查是否已填写所有必填字段，而无需检查每个E:\git\jsp [master ↑]> git push Warning: Permanently added 'jsp-moristems.rhcloud.com,107.21.78.52' (RSA) to the list of known hosts. Counting objects: 4, done. Delta compression using up to 8 threads. Compressing objects: 100% (4/4), done. Writing objects: 100% (4/4), 43.44 MiB | 338.00 KiB/s, done. Total 4 (delta 0), reused 0 (delta 0) remote: Executing Jenkins build. remote: remote: You can track your build at https://red-moristems.rhcloud.com/job/jsp-build remote: remote: Waiting for build to schedule............................... remote: **BUILD FAILED/CANCELLED** remote: Please see the Jenkins log for more details via 'rhc tail' remote: !!!!!!!! remote: Deployment Halted! remote: If the build failed before the deploy step, your previous remote: build is still running. Otherwise, your application may be remote: partially deployed or inaccessible. remote: Fix the build and try again. remote: !!!!!!!! remote: An error occurred executing 'gear postreceive' (exit code: 1) remote: Error message: CLIENT_ERROR: Failed to execute: 'control post-receive' for /var/lib/openshift/5799d1f889f5cf15800000a8/jenkins-client remote: remote: For more details about the problem, try running the command again with the '--trace' option. To ssh://5799d1f889f5cf15800000a8@jsp-moristems.rhcloud.com/~/git/jsp.git ad41e5f..2bd7925 master -> master事件的所有字段。你只需要跟踪一个字段是否有效，以免弄乱计数器。这是一个高效且有效的解决方案：

keyup

小提琴：https://jsfiddle.net/fa1LsLfh/1

Answer 6

你能试试这段代码吗？它适合你

$(document).ready(function() {
    $("#submit_button").hide();

    $('.required').on('keyup', function () {                    
           ToggleSubmitButton();
    }); 
});

function ToggleSubmitButton()
{
    $("#submit_button").hide();
    var getRequiredLength = $('.required').length;
    var nonempty = $('.required').filter(function() {
        return this.value != ''
    }).length;

    if(getRequiredLength ==  nonempty){
        $("#submit_button").show();
    }

}

Answer 7

如果您的输入是真正的required，您可以使用：invalid伪类来获取所有必需的空字段，如果该集合的长度<1，您知道所有必填字段都已填充。如果他们只获得了所需的类，你也可以使用JS来设置属性。这也适用于所有其他经验证的字段，如电子邮件字段或东西，所以我更喜欢这种方法。以下是其工作原理的示例：

＆＃13;

jQuery(document).ready(function() {
  jQuery('#testform input').on('keyup', function() {
    if(jQuery('#testform input:invalid').length < 1)
      {
        jQuery('#testform .dependend_submit').show();
       }
    else
      {
        jQuery('#testform .dependend_submit').hide();
      }
  });
});

＆＃13;

.dependend_submit {display: none;}
input {display: block;}
input:required {border-left: 1px solid red;}
input:not(:required) {border-left: 1px solid blue;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testform">
  <input type="text" name="text1" required="required" />
  <input type="text" name="text2" required="required" />
  <input type="text" name="text3" />
  <input type="text" name="text4" required="required" />
  <input type="text" name="text5" required="required" />
  <input type="submit" name="submit" value="submit" class="dependend_submit" />

＆＃13;

Answer 8

我刚遇到这个问题。让我添加另一种方法来解决这个问题。

<强> HTML

<form>
  <input type="text" name="a" value="" required>
  <input type="text" name="b" value="" required>
  <input type="submit" id="submit_button" disabled>
</form>

<强> CSS

#submit_button {
  display: none;
}

#submit_button.active {
  display: inline;
}

<强>的JavaScript

var submit = $('#submit_button'),
    required = $('input[required]');

required.on('keyup', function() {
    if (0 == required.filter(function() { return '' == this.value; }).length) {
        submit.addClass('active').prop('disabled', false);
    }
});

工作原理

默认情况下，使用CSS隐藏提交按钮。这可以避免在加载页面时它很快闪烁。它也是disabled。
必需的输入字段具有属性required，如果输入为空，它还可能显示浏览器验证信息。这是使用类.required的替代方法。当然，您仍然可以将选择器从input[required]更改为.required。
提交按钮以及所有必填字段都存储在变量（submit和required）中。这是为了避免在每个keyup事件处理程序上重新查询很多。
最后，在每个keyup上，先前选择的输入将被过滤为空value s。如果结果为空（0 == list.length），则会通过添加CSS类active来显示该按钮（当然也可以命名为enabled或类似）。这样做的好处是可以轻松添加过渡等内容。它还增强了CSS和JavaScript的解耦。

最后的想法

使用keyup可能仅适用于文本输入。如果您要跟踪其他输入，例如复选框，请选择下拉列表等，您可以考虑使用 .on('input change')本身就是form。

如果字段再次变空，您也可以禁用和隐藏按钮，例如：

if (0 == required.filter(function() { return '' == this.value; }).length) {
  submit.addClass('active').prop('disabled', false);
} else {
  submit.removeClass('active').prop('disabled', true);
}

<强>演示

Try before buy

特定输入有效时显示按钮

8 个答案: