如果 HTML 文件输入字段为空，是否可以禁用表单提交？答案

【问题标题】：Can a form submit be disabled if a HTML file input field is empty?如果 HTML 文件输入字段为空，是否可以禁用表单提交？
【发布时间】：2011-12-13 06:08:22
【问题描述】：

在一个只包含一个的表单中

<input id="fileInput" name="BugReport" type="file" />

输入字段，如果文件输入为空（尚未选择文件），我想禁用提交按钮。有推荐的方法吗？

【问题讨论】：

标签： html forms file-upload

【解决方案1】：

检查文件输入的值是否应该始终有效。

if (document.getElementById("fileInput").value == "") .....

文件的真实路径会出于安全原因对其进行混淆，但在选择文件时，值应始终返回 em>。

【讨论】：

【解决方案2】：

将required 属性添加到输入。它只能在支持它的浏览器中工作，所以你应该有一个 JavaScript 替代品（<form onSubmit="if(document.getElementById('fileinput').value == '') return false;"> 或类似的东西）。

【讨论】：

【解决方案3】：

您可以使用 JavaScript 来实现。以下代码假设您已将“s”的id 指定给表单的提交按钮：

document.getElementById("fileInput").onchange = function() {
    if(this.value) {
        document.getElementById("s").disabled = false; 
    }  
}

显然，您需要禁用提交按钮才能启动。例如：

<input type="submit" id="s" disabled>

【讨论】：

【解决方案4】：

最好的方法是让 Javascript 在所有输入发生更改时对其进行验证。因此，随着输入发生变化（您可以使用 on change 事件）在 Javascript 中启用或禁用按钮取决于。

<input id="fileInput" name="BugReport" type="file" onchange="validateForm()"/>

这应该调用 javascript 按钮，该按钮将检查输入是否具有有效文件，如果是，则启用提交按钮。

【讨论】：

【解决方案5】：

你可以使用 jQuery 来做到这一点

<script src="/Scripts/jquery-1.5.1.js" type="text/javascript"></script>

<script>
    $(function () {
        $('#submit').attr("disabled", true);

        $('#fileInput').change(function () {
            if ($('#fileInput').val().length == 0)
                $('#submit').attr("disabled", true);
            else
                $('#submit').attr("disabled", false);
        });
    });
</script>

<input id="fileInput" name="BugReport" type="file" />
<input id="submit" type="submit" />

希望对你有帮助

【讨论】：

【解决方案6】：

是的，您可以添加如下内容：

<input type="submit" onclick="if (window.getElementById('fileInput').value == '') return false" />

或从禁用的提交按钮开始，并在单击文件输入并且值与空字符串不同时启用它。

检查this jsbin 以查看文件输入的值是什么（它的“假路径”和文件名）

【讨论】：

【解决方案7】：

如果您使用的是 HTML5，只需在输入标签中添加 required：

<input type='file' required />

例子：

<form>
  <input type='file' required />
  <button type="submit"> Submit </button>
</form>

【讨论】：