Maîtrise la validation HTML intégrée des formulaires avec les champs requis, les patterns, les contraintes, et apprends à fournir des messages de validation personnalisés sans frameworks JavaScript.
HTML fournit une validation puissante sans aucun JavaScript. Lorsqu'un formulaire est soumis, le navigateur vérifie chaque champ par rapport à ses attributs de validation et bloque la soumission si un champ est invalide.
| Attribut | S'applique à | Description |
|---|---|---|
required | Toutes les entrées | Le champ ne doit pas être vide |
minlength / maxlength | Entrées texte | Nombre minimum/maximum de caractères |
min / max | Number, date, range | Valeur numérique ou date minimum/maximum |
step | Number, range | Incrément valide (ex : step="0.01" pour les centimes) |
pattern | Entrées texte | Expression régulière que la valeur doit respecter |
type | Toutes les entrées | Validation intégrée pour email, url, number, date, etc. |
Le navigateur affiche des infobulles d'erreur natives lorsque la validation échoue. Ces messages sont localisés dans la langue de l'utilisateur.
L'attribut pattern prend une expression régulière (sans délimiteurs) et valide la valeur de l'entrée par rapport à celle-ci. Le pattern doit correspondre à la totalité de la valeur (il est implicitement ancré avec ^ et $).
<!-- Téléphone : chiffres, espaces, tirets, et préfixe + optionnel -->
<input type="tel" pattern="\+?[\d\s-]{7,15}" title="Numéro de téléphone">
<!-- Code postal (US) : 5 chiffres ou format 5+4 -->
<input type="text" pattern="\d{5}(-\d{4})?" title="Code postal US">
<!-- Nom d'utilisateur : 3-20 caractères alphanumériques -->
<input type="text" pattern="[a-zA-Z0-9]{3,20}" title="3-20 caractères alphanumériques">
<!-- Aucun espace autorisé -->
<input type="text" pattern="\S+" title="Aucun espace autorisé">Associe toujours pattern avec l'attribut title — son texte est inclus dans l'infobulle d'erreur du navigateur pour aider l'utilisateur à comprendre le format attendu.
CSS fournit des pseudo-classes qui te permettent de styliser les éléments de formulaire en fonction de leur état de validation :
:valid — Le champ passe toutes les contraintes de validation.:invalid — Le champ échoue au moins une contrainte.:required — Le champ a un attribut required.:optional — Le champ n'a pas required.:in-range / :out-of-range — Pour les entrées number/date avec min/max.:placeholder-shown — Le placeholder est actuellement visible (le champ est vide).input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { border-left: 3px solid orange; }Note : Les champs optionnels vides correspondent à :valid, et les champs requis vides correspondent à :invalid dès le chargement de la page. Pour éviter de styliser les champs vides au chargement, combine avec :not(:placeholder-shown) ou utilise la pseudo-classe :user-invalid (navigateurs récents).
Tu peux remplacer les messages d'erreur par défaut du navigateur en utilisant l'API de validation des contraintes de JavaScript :
const input = document.getElementById('username');
input.addEventListener('input', () => {
if (input.validity.tooShort) {
input.setCustomValidity('Le nom d\'utilisateur doit contenir au moins 3 caractères.');
} else if (input.validity.patternMismatch) {
input.setCustomValidity('Seules les lettres et les chiffres sont autorisés.');
} else {
input.setCustomValidity(''); // Réinitialiser — le champ est valide
}
});input.setCustomValidity(message) — Définit un message d'erreur personnalisé. Passe '' pour effacer.input.reportValidity() — Déclenche l'interface de validation immédiatement.input.checkValidity() — Retourne true/false sans afficher l'interface.input.validity — Un objet avec des propriétés booléennes : valueMissing, typeMismatch, patternMismatch, tooShort, tooLong, rangeUnderflow, rangeOverflow, stepMismatch, customError.novalidate sur <form> — Désactive toute validation pour ce formulaire.formnovalidate sur <button> — Désactive la validation pour ce bouton de soumission spécifique (utile pour les boutons "Enregistrer le brouillon").<form>
<!-- Email requis -->
<label for="email">Email (requis) :</label>
<input type="email" id="email" name="email" required
placeholder="toi@exemple.com">
<!-- Nom d'utilisateur avec pattern -->
<label for="username">Nom d'utilisateur (3-20 alphanumériques) :</label>
<input type="text" id="username" name="username"
pattern="[a-zA-Z0-9]{3,20}"
title="3 à 20 lettres ou chiffres"
minlength="3" maxlength="20" required>
<!-- Âge avec min/max -->
<label for="age">Âge (18-120) :</label>
<input type="number" id="age" name="age"
min="18" max="120" required>
<!-- Soumettre et Enregistrer le brouillon -->
<button type="submit">S'inscrire</button>
<button type="submit" formnovalidate>Enregistrer le brouillon</button>
</form>Que se passe-t-il lorsque tu ajoutes l'attribut `novalidate` à un élément <form> ?