How to handle "input is not focusable" in javascript form validation?

Question

I have this control

<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>

I want to fill the textbox with the file name. In the above code, each file has an icon. When the icon is pressed, the corresponding filename should be populated into the input.

This works fine, but when the user doesn't select a file and then submit they get an error:

< ;/p>

input is not focusable

How can I handle this error using a custom javascript function?

Answer 1

fileName needs required = true, not a file selector.

Then you can do this:

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