JavaScript Academy · Leçon

L’API de validation des contraintes

Utilisez la vérification de validité intégrée.

L’API de validation des contraintes est une leçon JavaScript 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 JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Validation intégrée

Les champs de formulaire HTML prennent en charge des attributs comme required, min, max, pattern et type="email". L’API de validation des contraintes permet à JavaScript d’examiner et de contrôler cette validation intégrée.

checkValidity

checkValidity renvoie une valeur booléenne et déclenche un événement invalid sur chaque contrôle en échec, sans afficher la bulle du navigateur.

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

reportValidity fonctionne comme checkValidity, mais affiche également l’interface de message de validation du navigateur pour les champs invalides.

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

L’objet de validité

Chaque contrôle possède un objet validity contenant des indicateurs booléens qui décrivent précisément le problème.

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

validity.valid vaut true uniquement lorsque le champ respecte toutes les contraintes ; cette propriété résume les autres indicateurs.

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

validationMessage contient le message localisé que le navigateur afficherait pour l’erreur actuelle.

console.log(email.validationMessage);

setCustomValidity

setCustomValidity rend un champ invalide avec votre propre message. Une chaîne non vide signifie que le champ est invalide ; une chaîne vide efface le message.

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

Toujours effacer les erreurs personnalisées

Si vous définissez un message personnalisé, vous devez l’effacer avec une chaîne vide dès que le champ devient valide, sinon il restera invalide indéfiniment.

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

L’événement d’invalidité

Écoutez l’événement invalid pour exécuter une logique personnalisée, comme appliquer un style à un champ lorsque la validation échoue.

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

Désactiver les bulles natives

Ajoutez novalidate au formulaire pour supprimer les fenêtres natives tout en continuant à utiliser l’API pour vos propres messages.

form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
  if (!form.checkValidity()) e.preventDefault();
});

Mise en forme selon la validité

Les pseudo-classes CSS :valid et :invalid mettent automatiquement les champs en forme selon leur état de validité.

Vérification rapide

Règle de validation personnalisée.

Récapitulatif

L’API de validation des contraintes fonctionne avec les attributs de contrainte HTML. Utilisez checkValidity/reportValidity pour vérifier les erreurs et, éventuellement, les afficher ; examinez les indicateurs de validity et validationMessage, puis ajoutez des règles personnalisées avec setCustomValidity, en les effaçant avec une chaîne vide. L’événement invalid et les pseudo-classes CSS :valid/:invalid facilitent la mise en forme.

Questions Fréquemment Posées

La leçon « L’API de validation des contraintes » est-elle gratuite ?

Oui — le texte complet de « L’API de validation des contraintes » 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 JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « L’API de validation des contraintes » ?

Utilisez la vérification de validité intégrée. Tu pratiques JavaScript 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 JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript 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 « L’API de validation des contraintes » ?

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 JavaScript Academy ?

Oui. Chaque leçon JavaScript 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

← Retour à JavaScript Academy