html 5隐藏的输入类型文件需要验证

Question

我在我的网络表单上使用HTML5客户端验证。所有字段都运行正常，但我的文件字段未显示所需的错误，因为输入类型文件被CSS隐藏。

我的代码是：

<input id="imageUpload" class="form-control"  type="file" name="image" placeholder="Photo" capture required>

Answer 1

问题是浏览器无法聚焦隐藏的元素。简单的解决方法是使用opacity: 0或visibility: hidden而不是display: none。

#imageUpload {
  opacity: 0;
}

<form>
  <input id="imageUpload" class="form-control" type="file" name="image" placeholder="Photo" capture required>
  <input type="submit">
</form>