javascript：如果所有文本字段都为空，则阻止提交？答案

【问题标题】：javascript: prevent submit if all text fields are empty?javascript：如果所有文本字段都为空，则阻止提交？
【发布时间】：2013-04-30 10:45:40
【问题描述】：

我正在使用这个 javascript 来禁用我的表单提交按钮，直到用户在 textarea 字段中键入。一旦 textarea 被填充，提交按钮就不再被禁用。

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

这是我目前使用的：

<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\">

【问题讨论】：

您似乎正在使用 jQuery 可能值得一提，并将其添加到标签中。它为标签数量下的问题提供了更多可见性..
如果你是动态加载 DOM 那么你需要使用它作为$(document).on('submit','#submit',function(e){
抱歉意外重新标记

标签： javascript jquery jqueryform

【解决方案1】：

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

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

【讨论】：

这似乎对我不起作用，我是否将这一行保留在
@BearJohn 不，你没有。

【解决方案2】：

尝试使用：

<script>
$(function(){

    $('form input').each(function(){
        if($(this).is(':empty')){
           $('form #submit').preventDefault();
        }
    });    

});
</script>

【讨论】：

【解决方案3】：

使用这个：http://jsfiddle.net/qKG5F/641/

<input type="submit" id="register" value="Register" disabled="disabled" />

(function() {
$('form > input').keyup(function() {

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

    if (empty) {
        $('#register').attr('disabled', 'disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    } else {
        $('#register').removeAttr('disabled'); // updated according to http://stackoverflow.com/questions/7637790/how-to-remove-disabled-attribute-with-jquery-ie
    }
});
})()

【讨论】：

【解决方案4】：

您需要 OR 运算符 - ||

所以如果display_name 为空或public_email 为空等等...

$(function(){

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

      if($("#display_name").val()=="" || $("#public_email").val()=="" || $("#phone").val()=="" || $("#age").val()=="")
      {      
        e.preventDefault();
       }
    });        

});

【讨论】：

我是否还必须将它们全部包含在表单标签中，如下所示：onSubmit=\"if (this.display_name.value == '') {return false;}\"> ？跨度>
@BearJohn 是的，如果您使用 form 标记内联进行操作 - 但 jQuery 应该在不需要 form 标记中的 onSubmit 事件属性的情况下获取事件完全没有

【解决方案5】：

为您想要包含在此验证中的所有文本字段提供一个类 class="required" 或类似的内容，然后您可以这样做

var empty = $('.required').filter(function(){ return $(this).val() == "" }).length;
if(empty === 0){
   //Enable your submit button all text fields have a value
}

【讨论】：

【解决方案6】：

试试这个功能：

function checkInputs(form) {
  var inputs, all, 
      status = true;

  if (form && form instanceof jQuery && form.length) {
    inputs = form.find("input[type=text]");

    all = inputs.length;

    while (all--) {
      if (!inputs[all].value) {
        status = false;        

        break;
      }
    }

    return status;
  }
}

这里有演示：http://jsbin.com/afukir/1/edit

编辑：我添加了instanceof 以确保该函数仅在表单实际上是 jQuery 对象时才会继续。

【讨论】：