Lire les valeurs des champs, intercepter l'envoi d'un formulaire, valider les données et afficher les erreurs, réagir à la saisie au clavier et activer ou désactiver un bouton.
Le festival Gnaoua d'Essaouira ouvre les inscriptions pour ses bénévoles. Le formulaire doit refuser un e-mail sans @, un âge de moins de 18 ans, un message trop long, et n'autoriser l'envoi qu'une fois la charte acceptée. Les attributs HTML5 vus au module 04 ne suffisent pas pour des règles sur mesure et des messages clairs : JavaScript prend le relais.
Le bénévole remplit le formulaire et clique sur Envoyer : l'événement submit se déclenche sur le formulaire.
const prenom = document.querySelector('#prenom').value.trim(); // texte sans espaces autour
const age = Number(document.querySelector('#age').value); // value est une chaîne
const accepte = document.querySelector('#charte').checked; // case à cocher
form.addEventListener('submit', (e) => {
e.preventDefault(); // pas d'envoi, pas de rechargement
const erreurs = [];
if (!email.includes('@')) erreurs.push('E-mail invalide');
if (age < 18) erreurs.push('Il faut avoir 18 ans');
if (erreurs.length) {
zoneErreurs.textContent = erreurs.join(' · ');
return; // on s'arrête là
}
// tout est correct : envoyer les données (AJAX, partie E) ou afficher un message
});
On écoute submit sur le formulaire, pas click sur le bouton : ainsi la touche Entrée est aussi gérée.
| Événement | Moment |
|---|---|
input | à chaque modification |
change | à la sortie du champ, ou au choix d’une case, d’un radio, d’une option |
focus / blur | le champ devient actif / inactif |
keydown | une touche est enfoncée (e.key) |
charte.addEventListener('change', () => {
bouton.disabled = !charte.checked; // bouton actif seulement si coché
});
Les attributs required, type="email", min… (module 04) font une première vérification. JavaScript ajoute des règles sur mesure, des messages clairs et des vérifications en direct. Et le serveur vérifie toujours une dernière fois.
Avant de laisser passer le dossier, le contrôleur vérifie chaque pièce. S'il manque quelque chose, il arrête le dossier (preventDefault) et explique ce qui manque.
form.addEventListener('submit', (e) => {
e.preventDefault(); // on garde la main
if (!email.value.includes('@')) {
erreurs.textContent = 'E-mail invalide';
}
}); Comme le compteur d'un SMS, l'événement input se déclenche à chaque caractère tapé : on peut afficher en direct combien il en reste.
message.addEventListener('input', () => {
compteur.textContent = `${message.value.length} / 200`;
}); Comment lire : (1) un champ texte ; (2) une case à cocher ; (3) le bouton radio choisi dans le groupe name="taille" ; (4) la valeur d'un <select> ?
document.querySelector('#prenom').value // texte document.querySelector('#charte').checked // true / false document.querySelector('input[name="taille"]:checked')?.value document.querySelector('#ville').value // option choisie
Plutôt qu'un message global, ajoutez la classe invalide sur le champ e-mail quand il est faux, et retirez-la quand il devient correct pendant la saisie.
const email = document.querySelector('#email'); email.addEventListener('input', () => { email.classList.toggle('invalide', !email.value.includes('@')); }); /* CSS : .invalide { border-color: #c0392b; } */
Comment récupérer toutes les valeurs d'un formulaire d'un coup ?
const donnees = Object.fromEntries(new FormData(form)); // Les champs doivent avoir un attribut name. console.log(donnees); // { prenom: 'Salma', email: '...' }