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

javascript: prevent submit if all text fields are empty?

本文关键字：提交 字段 如果 文本 Javascript      更新时间：2023-09-26

我使用这个javascript禁用我的表单提交按钮，直到用户在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'">

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

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

尝试使用:

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

使用: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
    }
});
})()

您需要使用OR操作符- ||

如果display_name为空或者public_email为空等等

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

给你想要包含在这个验证中的所有文本字段一个class="required"之类的类，然后你可以这样做

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

试试这个函数:

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对象

相关文章：