Attributs de validation des formulaires
Appliquez les attributs required, minlength, maxlength, pattern, min, max et step, puis stylez les états de validation avec les pseudo-classes :valid et :invalid.
Attributs de validation des formulaires est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Validation native du navigateur
HTML5 fournit une validation intégrée des formulaires grâce aux attributs. Lorsqu’un formulaire est envoyé, le navigateur valide chaque champ. En cas d’échec, il affiche une infobulle d’erreur native et empêche l’envoi, sans nécessiter de JavaScript pour les cas simples.
required
Ajouter required à un champ, à un menu select ou à une zone de texte le rend obligatoire. Le navigateur affiche une erreur si le champ est vide lors de l’envoi du formulaire.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength et maxlength
minlength impose un nombre minimal de caractères. maxlength empêche toute saisie au-delà d’un maximum. Combinez-les pour imposer une certaine complexité aux mots de passe ou limiter la longueur des commentaires.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max et step pour les champs numériques
min et max définissent la plage valide pour les champs de nombre et de date. step définit l’incrément, ce qui est utile pour les plages (5 %, la précision décimale ou les dates uniquement).
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — Validation par expression régulière
pattern accepte une expression régulière JavaScript. Le champ doit correspondre à l’expression pour que le formulaire soit envoyé. Incluez un title pour décrire le format attendu dans l’infobulle d’erreur du navigateur.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — Désactiver la validation native
Ajoutez novalidate à l’élément <form> pour désactiver toute validation native du navigateur. Faites-le lorsque vous implémentez une validation JavaScript personnalisée, afin d’offrir à l’utilisateur une expérience cohérente.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Vérifier la validité en JavaScript
L’API de validation des contraintes permet de vérifier la validité par programmation : input.validity (objet ValidityState), input.checkValidity() (renvoie un booléen), input.setCustomValidity(message) (définit une erreur personnalisée).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Appelez setCustomValidity(message) avec une chaîne non vide pour marquer un champ comme invalide et afficher un message personnalisé. Appelez-la avec une chaîne vide pour effacer l’erreur. Cette méthode est utile pour les champs validés côté serveur, comme l’unicité de username.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}Pseudo-classes pour les champs valides et invalides
Utilisez les pseudo-classes CSS pour styliser les champs valides et invalides. Attention : les champs sont invalides avant même que l’utilisateur interagisse avec eux. Utilisez :user-invalid (dans les navigateurs modernes) ou JavaScript pour ajouter d’abord une classe indiquant que le champ a été consulté.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Messages d’erreur personnalisés avec reportValidity
form.reportValidity() déclenche l’interface native de validation du navigateur sur tous les champs. Utilisez-la après avoir défini des messages de validité personnalisés afin de les afficher à l’utilisateur sans attendre un événement de soumission.
Modèle d’affichage accessible des erreurs
Affichez les erreurs directement dans la page en procédant ainsi : 1) ajoutez aria-invalid="true" au champ, 2) affichez un paragraphe d’erreur visible associé avec aria-describedby, 3) déplacez le focus vers le premier champ invalide. Cette méthode convient à tous les utilisateurs, y compris ceux qui utilisent un lecteur d’écran.
Vérification rapide
Quel attribut limite un champ de texte à un maximum de 280 caractères ?
Récapitulatif : attributs de validation des formulaires
L’obligation de saisie, les longueurs minimale et maximale, les limites minimale et maximale avec le pas, ainsi que le motif, fournissent gratuitement une validation native dans le navigateur. Utilisez l’attribut qui désactive la validation native lorsque vous implémentez une validation personnalisée avec JS. L’API de validation des contraintes permet à JavaScript d’accéder à l’état de validité. Affichez les erreurs avec la pseudo-classe d’invalidité après interaction de l’utilisateur.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Attributs de validation des formulaires » est-elle gratuite ?
Oui — le texte complet de « Attributs de validation des formulaires » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Attributs de validation des formulaires » ?
Appliquez les attributs required, minlength, maxlength, pattern, min, max et step, puis stylez les états de validation avec les pseudo-classes :valid et :invalid. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Attributs de validation des formulaires » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Contrôles de formulaire : types input, select, textarea
- ARIA et accessibilité : label, role, aria-*
- HTML5 sémantique : éléments sémantiques ou soupe de div
- Attributs de validation des formulaires