选择文件后取消焦点文件输入框（以验证输入）答案

【问题标题】：Un-focus file input box AFTER file got selected (to validate input)选择文件后取消焦点文件输入框（以验证输入）
【发布时间】：2021-04-16 00:59:13
【问题描述】：

我有一个带有文件输入框的引导表单，在提交之前会在客户端站点上检查有效扩展名。

<div class = "container", id="container">
<form id= "fileinput-form" action="/file" method="POST" >
  <div class="form-group col-md-4" >
   <input class="form-control" type="file" accept=".csv,.txt" name="inputfile" aria-label="file example">
  </div>
  <div style="margin-top:10px">
   <input class="btn btn-primary" id="submit-file" type="submit" value="Predict">
  </div>
</form>
</div>

但是，验证只是在输入框未聚焦（或者更确切地说是通过单击某处）之后触发。不过，我希望在关闭 Windows 对话框（选择文件）后立即进行验证，而无需取消输入框的焦点。

$("#fileinput-form").validate({

      rules:{
          inputfile: {
          required: true,
          extension: true
          }
      },
      messages:{
          inputfile:{
          required: "Please input a file."
          }
      },

 });});

我已经尝试添加onchange函数，没有任何成功...有什么解决办法吗？

$("#fileinput-form").on("change",function(e) { 
     console.log('file changed'); 
     $("#fileinput-form").trigger('blur');
     /*$("hidden-input").focus();*/
});

【问题讨论】：

标签： javascript html jquery forms validation

【解决方案1】：

对于可能也遇到该问题的任何人，这里有一个可以很好地完成工作的可行解决方案：

在 html 中添加一个空的div。

<div id="eventresponse"> </div>

将文本交给div。

$("#inputfile").bind("change",function(){
      $("#eventresponse").text("Input text here");
});

添加新样式

#eventresponse{
  color: red;
  font-style: italic;
  }

eventresponse 只会在 Windows 对话框关闭时触发并弹出。

注意： 由于我对 javascript 不太熟悉，因此我使用异步在服务器站点（flask）上实现了实际验证。接电话。当然，纯 javascript 有一个更简单的解决方案。

【讨论】：