如何禁用提交按钮，直到所有文本字段都已满并选择文件

Posted 2023-02-22

【中文标题】如何禁用提交按钮，直到所有文本字段都已满并选择文件

【英文标题】：How to disable submit button until all text fields are full and file is selected

【发布时间】：2016-03-03 14:19:09

【问题描述】：

我是 javascript / jquery 的新手，所以我可能遗漏了一些明显的东西，但我找到了在所有文本字段都填满之前禁用提交按钮的解决方案，并且我找到了在文件被填充之前禁用它的解决方案选择。但是，我的表单由一个文件输入和 3 个文本字段组成，在选择所有文本字段和一个文件之前，我无法找到禁用它的方法。

我正在使用的代码的提炼版本在这里：

html

    <div>
    <input type="file" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="Upload" class="submit" id="submit" disabled="disabled" />
    </div>

JS

    $('.submit').click(function() 
var empty = $(this).parent().find("input").filter(function() 
        return this.value === "";
    );
    if(empty.length) 

        $('.submit').prop('disabled', false);
    
    );
)()

感谢您的帮助

https://jsfiddle.net/xG2KS/482/

【参考方案1】：

尝试在这些字段上捕获事件并使用另一个函数检查空值，请参见下面的代码：

$(':input').on('change keyup', function () 
  // call the function after
  // both change and keyup event trigger
  var k = checking();
  // if value inc not 0
  if (k) $('.submit').prop('disabled', true);
  // if value inc is 0
  else $('.submit').prop('disabled', false);
);

// this function check for empty values
function checking() 
  var inc = 0;
  // capture all input except submit button
  $(':input:not(:submit)').each(function () 
    if ($(this).val() == "") inc++;
  );
  return inc;

这只是一个例子，但逻辑是这样的。

更新： 事件委托。您可能需要阅读this

 // document -> can be replaced with nearest parent/container
 // which is already exist on the page,
 // something that hold dynamic data(in your case form input)
 $(document).on('change keyup',':input', function ()..);

DEMO

【讨论】：

感谢修复了 jsfiddle，但由于某种原因，它不适用于我的实际代码......这有什么可能的原因吗？它在一个表单中，使用在焦点上删除的占位符文本，使用自定义按钮并在单击时将值插入数据库。这些会导致它不起作用吗？

表单上的输入字段是动态创建的吗？如果是，请尝试通过以下方式委派这些：$(document).on('change keyup',':input', function ()..);

就是这样！现在完美运行，非常感谢。我已经坚持了很久！

【参考方案2】：

请看这个小提琴https://jsfiddle.net/xG2KS/482/

$('input').on('change',function()
    var empty = $('div').find("input").filter(function() 
            return this.value === "";
        );

        if(empty.length>0) 

            $('.submit').prop('disabled', true);
        
    else
        $('.submit').prop('disabled', false);
    
);

[1]：

【参考方案3】：

诀窍是

不要禁用提交按钮；否则用户无法点击，无法进行测试 仅在处理时，仅在满足所有测试时才返回true

这是 HTML 的修改版本：

<form id="test" method="post" enctype="multipart/form-data" action="">
    <input type="file" name="file"><br>
    <input type="text" name="name"><br>
    <input type="text" name="email"><br>
    <button name="submit" type="submit">Upload</button>
</form>

还有一些纯 JavaScript：

window.onload=init;
function init() 
    var form=document.getElementById('test');
    form.onsubmit=testSubmit;

    function testSubmit() 
        if(!form['file'].value) return false;
        if(!form['name'].value) return false;
        if(!form['email'].value) return false;
    

请注意，我已经删除了 HTML 中的所有 XHTML 痕迹。当然，这不是必需的，但 HTML5 确实允许上述更简单的版本，而无需 JavaScript。只需使用required 属性：

<form id="test" method="post" enctype="multipart/form-data" action="">
    <input type="file" name="file" required><br>
    <input type="text" name="name" required><br>
    <input type="text" name="email" required><br>
    <button name="submit" type="submit">Upload</button>
</form>

如果必填字段为空并且适用于所有现代（非 IE8）浏览器，这将阻止表单提交。

【参考方案4】：

监听file 和text 输入元素上的input 事件，计算未填充输入的数量，并根据该数字设置提交按钮的disabled 属性。查看下面的演示。

$(':text,:file').on('input', function() 
    //find number of unfilled inputs
    var n = $(':text,:file').filter(function() 
        return this.value.trim().length == 0;
    ).length;
    
    //set disabled property of submit based on number
    $('#submit').prop('disabled', n != 0);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <input type="file" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="Upload" class="submit" id="submit" disabled="disabled" />
</div>

【参考方案5】：

对于我的方法，如果所有条件都是true，我宁愿使用array 来存储。然后使用every 确保一切都是true

$(function()
    function validateSubmit()
    
       var result = [];
       $('input[type=file], input[type=text]').each(function()
          if ($(this).val() == "")
            result.push(false);
          else
            result.push(true);
       );
       return result;
    

    $('input[type=file], input[type=text]').bind('change keyup', function()
       var res = validateSubmit().every(function(elem)
          return elem == true;
       );

       if (res)
        $('input[type=submit]').attr('disabled', false);
       else
        $('input[type=submit]').attr('disabled', true);
    );
);

Fiddle