0Pricing
HTML Academy · Leçon

L’attribut `novalidate`

Désactivez la validation du navigateur lorsque vous la gérez vous-même.

L’attribut `novalidate` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.

Limites de la validation du navigateur

La validation intégrée de HTML5 présente des limites :

  • Les messages d’erreur dépendent du navigateur et sont difficiles à mettre en forme
  • La validation s’exécute uniquement lors de la soumission, pas lors de la perte de focus ni de la saisie
  • Les règles métier complexes (correspondance des mots de passe, nom d’utilisateur unique) sont impossibles à gérer

Lorsque vous avez besoin d’un contrôle total, désactivez la validation intégrée avec novalidate.

novalidate sur un formulaire

Ajouter novalidate à un formulaire désactive toute validation du navigateur :

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

Pourquoi utiliser novalidate ?

Raisons courantes de désactiver la validation du navigateur :

  • Mise en forme personnalisée des messages d’erreur, conforme à votre système de conception
  • Validation en temps réel (lors de la perte de focus ou de la saisie, et pas uniquement lors de la soumission)
  • Validation de plusieurs champs (par exemple, confirmation du mot de passe)
  • Affichage des erreurs côté serveur après une redirection
  • Bibliothèques de validation tierces (Zod, Yup, React Hook Form)

Modèle de validation personnalisée

Construisez une validation personnalisée avec novalidate :

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

formnovalidate sur un bouton

Désactivez la validation pour un bouton de soumission spécifique sans utiliser novalidate sur l’ensemble du formulaire :

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

Mise en forme des erreurs personnalisées

Mise en forme des erreurs de validation personnalisées :

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

Erreurs personnalisées accessibles

Rendez les messages d’erreur personnalisés accessibles :

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

Stratégies de déclenchement de la validation

Quand déclencher la validation avec novalidate :

  • Lors de la soumission — le plus simple ; validez tout en une fois
  • Lors de la perte de focus — validez chaque champ lorsque l’utilisateur le quitte
  • Lors de la saisie — en temps réel ; meilleure expérience, mais peut sembler trop intrusive
  • Hybride — validez lors de la perte de focus et effacez les erreurs lors de la saisie

Modèle hybride perte de focus + saisie

L’approche de validation la plus conviviale :

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidate et validation côté serveur

Validez toujours également côté serveur :

  • La validation côté client sert à améliorer l’expérience utilisateur
  • La validation côté serveur sert à assurer la sécurité
  • Les utilisateurs peuvent contourner la validation HTML en modifiant les requêtes
  • novalidate et la validation JS personnalisée doivent reprendre les mêmes règles que le serveur

Bibliothèques de validation

Bibliothèques populaires de validation JavaScript compatibles avec novalidate :

  • Zod — validation de schémas axée sur TypeScript
  • Yup — validation de schémas d’objets
  • Valibot — bibliothèque de schémas légère
  • React Hook Form — état du formulaire et validation pour React

Tester une validation personnalisée

Comment tester une validation personnalisée de formulaire :

  • Testez une soumission vide (champs obligatoires)
  • Testez un format invalide (adresse e-mail incorrecte, motif téléphonique incorrect)
  • Testez les cas limites (espaces uniquement, Unicode, chaînes très longues)
  • Testez avec un lecteur d’écran pour vérifier l’annonce des erreurs
  • Testez la navigation au clavier entre les champs après l’affichage d’une erreur

Vérification rapide

Que fait formnovalidate sur un bouton ?

Récapitulatif : novalidate

Points essentiels de novalidate :

  • novalidate sur le formulaire — désactive toute validation du navigateur
  • formnovalidate sur le bouton — désactive la validation pour cette soumission uniquement
  • Utilisez une validation personnalisée pour contrôler l’expérience utilisateur et gérer les règles complexes
  • Validez toujours côté serveur — la validation côté client peut être contournée
  • Annoncez les erreurs de manière accessible avec role="alert" et aria-invalid

Questions Fréquemment Posées

La leçon « L’attribut `novalidate` » est-elle gratuite ?

Oui — le texte complet de « L’attribut `novalidate` » 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 « L’attribut `novalidate` » ?

Désactivez la validation du navigateur lorsque vous la gérez vous-même. 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 2 sur 4.

Combien de temps prend la leçon « L’attribut `novalidate` » ?

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

  1. `required`, `pattern`, `min`, `max` et `maxlength`
  2. L’attribut `novalidate`
  3. Notions fondamentales de l’API de validation des contraintes
  4. Validation HTML5 ou JavaScript : compromis
← Retour à HTML Academy