javascript - 重置表单会删除输入文件上的 HTML 5 验证

Question

我遇到了这个问题，但仍然对此一无所知。

这是我在jsfiddle上的代码。

如您所见，单击“上传”将触发文件输入的 HTML 验证，并显示错误消息。

但是，如果我选择一个文件，然后单击“重置”按钮来重置表单。之后，我点击“上传”（提交表单），验证就消失了。

我也尝试使用 javascript 方法reset()，但问题仍然存在。

请注意，我使用的是 Google Chrome 浏览器。

有人对这个问题有一些想法吗？

还是我刚刚遇到了 HTML 验证的错误？

Answer 1

看起来这是 Chrome 的一个错误。
您可以通过在输入字段中添加以下 CSS 来查看差异。

input:invalid {
    color: blue;
} 

当您在 FF 上重置时，输入字段将变为无效，但在 Chrome 上则不会。在 Chrome 上，如果您选择一个文件，然后再次调出选择屏幕然后取消它，该字段将变为无效。这似乎是重置输入字段的唯一方法。

看起来你将不得不添加一些代码。

Answer 2

只有我遇到问题的浏览器是在 Chrome 上。下面将为我解决这个问题（不知道为什么会这样）

$("button[type='reset']").on('click', function() {
    $("#file").replaceWith('<input id="file" type="file" required />');
    return true;
});

JSFiddle