如何处理“输入是不可聚焦的”在javascript表单验证?

Question

我有这个控件

<div class="conico">
  <input class="form-control" readonly id="fileName"/>
  <input class="form-control" type="file" style="display:none;" required="xxx" id="fileSelect"/>
  <label for="xxx" class="ico">
    <img src="/images/icocamera.svg">
  </label>
</div>

我想用文件名填充文本框。在上面的代码中，每个文件都有一个图标。当按下图标时，相应的文件名应该填充到输入中。

这工作得很好，但是，当用户没有选择一个文件，然后提交他们得到一个错误:

input is not focusable

如何使用自定义javascript函数处理此错误?

Answer 1

fileName needs required = true，而不是文件选择器。

然后你可以这样做:

$( "form" ).on( "submit", function( event ) {
  if ( $( "#fileName" ).val() ) {
    return;
  }
 
  console.log('not valid')
  event.preventDefault();
} );