9. Prévenir l’utilisateur en cas d’erreurs

Pour l’instant, si le formulaire contient des erreurs, le bouton de soumission du formulaire ne déclenchera aucune action. Cela peut être très pénible pour l’utilisateur, car il verra bien que quelque chose ne va pas dans le formulaire, mais il ne saura pas pourquoi !

Nous devons prévenir l’utilisateur sur ce qui ne fonctionne pas. Pour cela, nous allons ajouter des messages d’erreurs sur les champs name, hp et cp, afin d’indiquer à l’utilisateur que la donnée saisie n’est pas valide, et comment il pourrait la corriger. Et cela sera plutôt simple, car nous avons les informations de validité de chaque champ dans notre state ! 🔥

L’affichage des messages d’erreurs se fera uniquement si le state du formulaire nous indique que tel ou tel champ a une erreur à afficher. Dans ce cas, nous afficherons le message d’erreur présent dans le state . Modifiez donc le formulaire pokemon-form.tsx :

// ...

const PokemonForm: FunctionComponent<Props> = ({pokemon}) => {
 //...

 return (
  <form onSubmit={(e) => handleSubmit(e)}>
   ...
   {/* Pokemon name */}
   <div className="form-group">
    <label htmlFor="name">Nom</label>
     <input id="name" type="text" name="name" className="form-control" value={form.name.value} onChange={e => handleInputChange(e)}></input>
     {/* error */}
     {form.name.error &&
     <div className="card-panel red accent-1"> 
      {form.name.error} 
     </div>} 
    </div>
    {/* Pokemon hp */}
    <div className="form-group">
     <label htmlFor="hp">Point de vie</label>
     <input id="hp" type="number" name="hp" className="form-control" value={form.hp.value} onChange={e => handleInputChange(e)}></input>
     {/* error */}
     {form.hp.error &&
      <div className="card-panel red accent-1"> 
       {form.hp.error}
      </div>} 
     </div>
     {/* Pokemon cp */}
     <div className="form-group">
     <label htmlFor="cp">Dégâts</label>
     <input id="cp" type="number" name="cp" className="form-control" value={form.cp.value} onChange={e => handleInputChange(e)}></input>
     {/* error */}
     {form.cp.error &&
      <div className="card-panel red accent-1"> 
       {form.cp.error}
      </div>} 
     </div>
     ...
   </form>
 );
};
 
export default PokemonForm;

Regardez de la ligne 14 à 17, le message d’erreur est affiché seulement si le champ name possède une erreur. Sinon, aucune information inutile ne sera affiché à l’utilisateur !

Le principe est le même pour les champscp et hp, aux lignes 24-28, et 34-38.

Nous avons maintenant un formulaire parfaitement fonctionnel, qui ne peut être soumis que si l’ensemble des champs sont valides. Et si ce n’est pas le cas, de magnifiques messages d’erreurs sont affichés à l’utilisateur. Félicitations, les formulaires ce n’est jamais la partie la plus facile ! 🎉

L’interface que nous avons déjà développé pour les types de Pokémons (avec les cases à cocher qui se verrouillent et déverrouillent automatiquement en fonction d’un certain état de validité) est assez ergonomique pour que l’utilisateur comprenne tout seul les règles de validation, nous n’avons pas besoin d’afficher un message spécifique en plus, cela surchargerai inutilement l’interface utilisateur.