javascript:如果所有文本字段均为空，则阻止提交？

Question

我正在使用此 JavaScript 来禁用我的表单提交按钮，直到用户在文本区域字段中输入内容。一旦文本区域被填充，提交按钮就不再被禁用。

但是，虽然这适用于单个文本区域，但我现在想找到一种方法来完成这项工作，这样如果我有四个文本输入字段，则保持提交按钮处于禁用状态，直到所有输入字段都不为空/填充带文字。

这是我现在使用的:

<form action=\"includes/welcomestats.php\" method=\"post\" id=\"form1\" onSubmit=\"if (this.display_name.value == '') {return false;}\">
<input type=\"text\" name=\"display_name\" id=\"display_name\" maxlength=\"30\" placeholder=\"Display Name\">
<input type=\"submit\" class=\"welcome-submit2\" name=\"submit\" value=\"Next ->\" id=\"submit\"/>
</form>

    <script>
    $(function(){

        $("#submit").submit(function(e){

          if($("#display_name").val()==""))
          {      
            e.preventDefault();
           }
        });        

    });
    </script>

但现在我要向表单中添加更多文本输入字段，因此我需要脚本来保持提交按钮处于禁用状态，直到填充所有文本字段为止，有人可以帮助我吗？

我想将这些文本字段添加到我的表单中:

<input type=\"text\" name=\"public_email\" id=\"public_email\" maxlength=\"50\" placeholder=\"Email Address\">

<input type=\"text\" name=\"phone\" id=\"phone\" maxlength=\"30\" placeholder=\"Phone Number\">

<input type=\"text\" name=\"age\" id=\"age\" maxlength=\"2\" placeholder=\"Display Age\">

Answer 1

您可以使用.filter方法获取所有空输入元素，然后检查长度。

if ($('#form1 input').filter(function(){return $(this).val().length == 0;}).length > 0) {
  e.preventDefault();
}