Exploitez required, pattern, inputmode et l'API de validation par contraintes pour des formulaires robustes sans bibliothèque externe.
Ouvrir cette leçon dans KodokonLe navigateur embarque un moteur de validation complet que beaucoup d'équipes réimplémentent en JavaScript par réflexe. Les briques : required (champ obligatoire), les types (email, url, date) qui valident le format, minlength/maxlength, min/max/step pour les valeurs numériques, et pattern qui accepte une expression régulière. Détail crucial : pattern est implicitement ancré, la valeur entière doit correspondre, comme si la regex était entourée de ^ et $. Ajoutez autocomplete avec les valeurs normalisées (postal-code, email, tel) : c'est à la fois de l'UX et de l'accessibilité.
<label for="zip">Code postal</label>
<input id="zip" name="zip" type="text"
required pattern="[0-9]{5}"
inputmode="numeric"
autocomplete="postal-code">L'attribut inputmode est souvent mal compris : il ne valide rien. Il indique seulement au système mobile quel clavier virtuel afficher (numeric, tel, email, decimal, search). C'est pourquoi le duo type="text" + inputmode="numeric" + pattern est le pattern recommandé pour les codes numériques : vous obtenez le bon clavier sans hériter des comportements de type="number".
input:user-invalid {
border: 2px solid #b3261e;
}
input:user-valid {
border: 2px solid #1b5e20;
}Côté CSS, préférez :user-invalid à :invalid : la seconde s'applique dès le chargement, marquant en rouge des champs que l'utilisateur n'a pas encore touchés. Côté JavaScript, l'API de validation par contraintes complète le dispositif : checkValidity() déclenche la vérification, l'objet validity expose la cause précise (patternMismatch, valueMissing, tooShort), et setCustomValidity() vous permet de remplacer les messages génériques du navigateur par les vôtres.
const zip = document.querySelector("#zip");
zip.addEventListener("input", () => {
if (zip.validity.patternMismatch) {
zip.setCustomValidity("Entrez 5 chiffres.");
} else {
zip.setCustomValidity("");
}
});