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

Question

在仅包含输入字段的表单中

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

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

Answer 1

将 required 属性添加到输入。它只能在支持它的浏览器中工作，因此您应该有一个 JavaScript 替代方案 (

或类似的内容）。

Answer 2

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

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

出于安全原因，文件的真实路径将被混淆，但当选择文件时，该值应始终返回某物。

Answer 3

您可以使用 JavaScript 来完成。以下代码假设您已为表单的提交按钮指定了“s”的 id：

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

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

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

Answer 4

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

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

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

Answer 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" />

希望这会有所帮助

Answer 6

是的，您可以添加类似的内容：

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

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

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

Answer 7

如果您使用 HTML5，只需在输入标记内添加 required：

<input type='file' required />

示例：

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