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

时间:2011-10-22 17:10:05

标签: html forms file-upload

在仅包含

的表单中
<input id="fileInput" name="BugReport" type="file" />

输入字段,如果文件输入为空(我还没有选择文件),我想禁用“提交”按钮。有推荐的方法吗?

7 个答案:

答案 0 :(得分:2)

required属性添加到输入中。它只适用于支持它的浏览器,所以你应该有一个JavaScript备选方案(<form onSubmit="if(document.getElementById('fileinput').value == '') return false;">或类似的东西)。

答案 1 :(得分:0)

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

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

出于安全原因,文件的真实路径将被混淆,但是当选择文件时,该值应始终返回某些内容

答案 2 :(得分:0)

你可以用JavaScript做到这一点。以下代码假定您已向表单的提交按钮提供id个“s”:

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

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

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

答案 3 :(得分:0)

有了这个,最好的方法是让Javascript在更改时验证所有输入。因此,当Javascript启用或禁用按钮时,输入会发生变化(您可以使用on change事件)。

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

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

答案 4 :(得分:0)

您可以使用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" />

希望这会有所帮助

答案 5 :(得分:0)

是的,你可以添加类似的内容:

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

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

检查this jsbin以查看文件输入的值是什么(它的'伪路径'和文件名称)

答案 6 :(得分:0)

如果您使用的是HTML5,只需在输入标记内添加必需

<input type='file' required />

示例:

&#13;
&#13;
<form>
  <input type='file' required />
  <button type="submit"> Submit </button>
</form>
&#13;
&#13;
&#13;