Comment gérer « l'entrée n'est pas focalisable » dans la validation du formulaire javascript ?

Question

J'ai ce contrôle

<div class="conico">
  <input class="form-control" en lecture seule id="fileName"/>
  <input class="form-control" type="file" style="display:none;" requirejs="xxx" id="fileSelect"/>
  <étiquette pour="xxx" class="ico">
    <img src="/images/icocamera.svg">
  </étiquette>
</div>

Je souhaite remplir la zone de texte avec le nom du fichier. Dans le code ci-dessus, chaque fichier possède une icône. Lorsque vous appuyez sur l'icône, le nom de fichier correspondant doit être renseigné dans l'entrée.

Cela fonctionne bien, mais lorsque l'utilisateur ne sélectionne pas de fichier puis ne le soumet pas, il obtient une erreur :

< ;/p>

l'entrée n'est pas focalisable

Comment puis-je gérer cette erreur à l'aide d'une fonction javascript personnalisée ?

Answer 1

fileName doit être obligatoire = true, pas un sélecteur de fichier.

Ensuite, vous pouvez faire ceci :

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