7.0 Désactivation du bouton “Ajouter” si le champ est vide

Objectif :

L’objectif est de désactiver le bouton “Ajouter” tant que l’utilisateur n’a pas saisi un nombre minimum de caractères (par exemple 3 caractères). Cela permet de s’assurer que l’utilisateur ne peut pas ajouter des articles vides ou trop courts à la liste.


On va utiliser :

Étapes :

  1. Désactiver le bouton “Ajouter” par défaut, donc dans l'HTML ajouter l'attribut disabled sur le 'submit'.
  2. Ajouter un écouter sur les changements dans le champ de texte monField pour vérifier en temps réel si la saisie est suffisamment longue.
  3. Activer le bouton “Ajouter” uniquement si l’utilisateur a saisi au moins 3 caractères. monBtn.disabled = true
  4. Désactiver à nouveau le bouton si le champ est vidé ou contient moins de 3 caractères. monBtn.disabled = false