HTML Academy · Leçon

Notions fondamentales de l’API de validation des contraintes

Consultez l’état de validité et les messages personnalisés avec l’API de validation des contraintes.

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

Qu’est-ce que l’API de validation des contraintes ?

L’API de validation des contraintes est une interface JavaScript permettant de lire et de définir l’état de validation d’un formulaire :

Vérifier si un champ est valide
Lire quelle contrainte précise a échoué
Définir des messages d’erreur personnalisés
Déclencher programmatiquement l’interface de validation du navigateur

Propriété validity

Chaque contrôle de formulaire possède un objet validity contenant des indicateurs booléens spécifiques :

const input = document.getElementById('email');
const v = input.validity;

console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required but empty
console.log(v.typeMismatch);  // true if type doesn't match (e.g. bad email)
console.log(v.patternMismatch); // true if pattern fails
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.rangeUnderflow); // true if less than min
console.log(v.rangeOverflow);  // true if more than max

Méthode checkValidity

checkValidity() renvoie vrai ou faux et déclenche l’événement invalid :

const form = document.getElementById('my-form');

// Check entire form:
if (!form.checkValidity()) {
  console.log('Form has errors');
}

// Check individual field:
const email = document.getElementById('email');
if (!email.checkValidity()) {
  console.log('Email is invalid');
}
// The 'invalid' event fires on invalid fields

Méthode reportValidity

reportValidity() affiche l’interface native de validation du navigateur :

const input = document.getElementById('username');

// Shows native browser error tooltip if invalid:
const valid = input.reportValidity();
console.log(valid);  // true or false

// On a form: validates all fields and shows first error:
document.getElementById('form').reportValidity();

Propriété validationMessage

validationMessage renvoie la chaîne du message d’erreur du navigateur :

const email = document.querySelector('input[type=email]');
email.value = 'not-an-email';

console.log(email.validationMessage);
// e.g. "Please include an '@' in the email address..."

console.log(email.validity.typeMismatch); // true

setCustomValidity

setCustomValidity(message) définit une erreur de validation personnalisée :

const username = document.getElementById('username');

// Check availability on blur:
username.addEventListener('blur', async () => {
  const res = await fetch(`/check-username?name=${username.value}`);
  const { taken } = await res.json();

  if (taken) {
    username.setCustomValidity('This username is already taken.');
  } else {
    username.setCustomValidity('');  // empty string = clear the error
  }
});

Effacer la validité personnalisée

Vous devez effacer la validité personnalisée lorsque l’utilisateur corrige le problème :

const input = document.getElementById('username');

input.addEventListener('input', () => {
  // Clear custom error when user starts typing again:
  input.setCustomValidity('');
});

input.addEventListener('blur', async () => {
  // Re-validate on blur:
  const taken = await checkUsername(input.value);
  input.setCustomValidity(taken ? 'Username taken' : '');
});

Événement invalid

L’événement invalid se déclenche sur les contrôles de formulaire qui échouent à la validation :

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault();  // prevent default browser tooltip
    // Show your custom error UI instead:
    showError(input, input.validationMessage);
  });
});

Propriété will-validate

willValidate vaut vrai si l’élément participe à la validation des contraintes :

document.querySelectorAll(':input').forEach(el => {
  if (el.willValidate) {
    console.log(el.name, 'will be validated');
  }
});
// Disabled, hidden, or output elements return willValidate = false

Utiliser validity dans une validation personnalisée

Exemple complet de validation personnalisée :

<form id="signup" novalidate>
  <input type="email" id="email" name="email" required>
  <span id="email-err" role="alert"></span>
  <button type="submit">Sign Up</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('email-err');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  err.textContent = '';

  if (email.validity.valueMissing) {
    err.textContent = 'Email is required.';
    email.focus();
    return;
  }
  if (email.validity.typeMismatch) {
    err.textContent = 'Enter a valid email address.';
    email.focus();
    return;
  }
  // Submit...
});
</script>

Récapitulatif des indicateurs de ValidityState

Tous les indicateurs de ValidityState :

valueMissing — obligatoire mais vide
typeMismatch — format de type incorrect
patternMismatch — l’expression régulière du motif ne correspond pas
tooShort / tooLong — minlength/maxlength
rangeUnderflow / rangeOverflow — min/max
stepMismatch — valeur qui ne respecte pas un pas valide
customError — message défini par setCustomValidity
badInput — le navigateur ne peut pas analyser la valeur

Vérification rapide

Comment afficher programmatiquement la fenêtre contextuelle native d’erreur de validation du navigateur ?

Récapitulatif : API de validation des contraintes

Points essentiels de l’API de validation des contraintes :

input.validity — objet ValidityState contenant des indicateurs spécifiques
checkValidity() — renvoie vrai ou faux et déclenche l’événement invalid
reportValidity() — vérifie la validité et affiche l’interface d’erreur native
validationMessage — chaîne d’erreur du navigateur
setCustomValidity(msg) — définit une erreur personnalisée ; utilisez une chaîne vide pour l’effacer

Questions Fréquemment Posées

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

Oui — le texte complet de « Notions fondamentales 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 HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

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

Consultez l’état de validité et les messages personnalisés avec l’API de validation des contraintes. Tu pratiques HTML 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 HTML Academy ?

Aucune expérience préalable n'est requise. HTML 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 3 sur 4.

Combien de temps prend la leçon « Notions fondamentales de 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 HTML Academy ?

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

`required`, `pattern`, `min`, `max` et `maxlength`
L’attribut `novalidate`
Notions fondamentales de l’API de validation des contraintes
Validation HTML5 ou JavaScript : compromis

← Retour à HTML Academy