← Toute la documentation

Valider un champ de formulaire en texte enrichi

Un champ de texte enrichi obligatoire a besoin d’une règle propre à l’application. Le HTML peut être non vide alors que le document ne contient aucun texte. Validez le contenu courant de l’éditeur, copiez-le dans le champ soumis, puis appliquez de nouveau la règle sur le serveur.

1. Décider de ce qui compte comme contenu

Pour la description d’un ticket de support, vous pouvez exiger du texte. Pour un outil de légendage d’images, une image envoyée peut constituer à elle seule un document valide. Une vérification limitée au texte doit rejeter un document ne contenant qu’une image de façon délibérée, plutôt que de faire perdre par accident une publication valide.

Définissez comme règles distinctes le contenu obligatoire, la longueur minimale du texte et la taille maximale de la charge utile. La longueur du HTML compte le balisage ; ce n’est pas un nombre de caractères lisibles. Si vous utilisez getCharCount() ou getPlainText(), vérifiez comment la version que vous avez installée traite les espaces, les listes et les sauts de ligne avant d’en faire votre règle métier.

2. Détecter un texte vide, pas un balisage vide

// Application policy: this field requires text, not an image-only document.
// Browser-side validation helper. This is NOT an HTML sanitizer.
function hasRequiredText(html) {
  const template = document.createElement("template");
  template.innerHTML = html;
  template.content.querySelectorAll("script, style, template")
    .forEach(node => node.remove());
  return (template.content.textContent || "")
    .replace(/[\s\u00a0\u200b\ufeff]/gu, "").length > 0;
}

Cet exemple rejette les paragraphes vides, les sauts de ligne, les espaces insécables et le contenu composé uniquement d’images. Il analyse le contenu dans un template détaché et n’insère jamais ce contenu dans la page active. C’est une vérification de présence de texte, et non un filtre de sécurité ni un test de mise en page visuelle : le texte masqué par CSS et les widgets propres à l’application ont besoin de leur propre politique.

Pour une longueur minimale, décidez si vous comptez des unités de code, des points de code Unicode ou des caractères tels que l’utilisateur les perçoit. La longueur d’une chaîne JavaScript peut compter un emoji différemment d’un caractère visible. Appliquez la même politique des deux côtés de la requête.

3. Copier le HTML courant et afficher une erreur utile

// Assumes editor1 is ready and these elements exist on your page.
// Leave the editor's hidden textarea without a native required attribute.
const form = document.querySelector("#ticket");
const field = document.querySelector("#body");
const message = document.querySelector("#body-error"); // e.g. <p role="alert">

form.addEventListener("submit", event => {
  const html = editor1.getHTMLCode();
  field.value = html; // Include programmatic edits in the submitted value.
  if (!hasRequiredText(html)) {
    event.preventDefault();
    message.textContent = "Please enter a description.";
    editor1.focus();
    return;
  }
  message.textContent = "";
  // Normal form submission continues to your application's endpoint.
});

La validation native required du navigateur ne peut pas servir de façon fiable de règle de champ obligatoire pour l’éditeur une fois son textarea masqué. Conservez la validation normale pour les contrôles de formulaire ordinaires, mais appliquez la règle de l’éditeur à son contenu courant. N’ajoutez pas de contrainte required native au champ masqué sous-jacent en espérant obtenir une erreur qui puisse recevoir le focus.

Gardez le bouton Save désactivé jusqu’à la fin de l’initialisation. En cas d’échec, conservez le brouillon, affichez un message visible près du champ et ramenez le focus dans l’éditeur. Associez le message à la véritable surface modifiable à l’aide des points d’accroche d’accessibilité pris en charge par votre intégration ; un attribut sur un textarea masqué ne suffit pas à étiqueter la surface d’édition.

Ce fragment ne couvre que la validation synchrone du texte. Si des images sont en cours d’envoi, suivez la séquence de fin d’envoi et d’enregistrement avant de soumettre. Dans React, lisez le contenu courant au moment de la soumission, comme décrit dans l’état de l’éditeur et l’enregistrement.

4. Valider de nouveau après le nettoyage côté serveur

Les clients peuvent contourner les vérifications du navigateur. Authentifiez et autorisez l’enregistrement, appliquez les limites de requête et de stockage, nettoyez le HTML avec une politique maintenue reposant sur un analyseur, puis évaluez si le document accepté respecte votre règle de contenu. Un document qui ne contient que du balisage rejeté ne doit pas devenir un enregistrement vide accepté.

Renvoyez une erreur propre au champ et gardez le brouillon de l’utilisateur disponible. N’affichez jamais de HTML rejeté sans échappement dans une réponse d’erreur. Pour des exemples en C# ou en PHP de réception et de stockage du contenu, partez de la démo de votre langage et du guide sur le stockage du texte enrichi.

Liste de vérification d’acceptation

  • Un éditeur vide, des paragraphes vides et des espaces insécables sont rejetés.
  • Le texte normal, le texte mis en forme et les langues que tapent vos utilisateurs sont acceptés.
  • Le contenu composé uniquement d’images suit une politique explicite.
  • Le contenu chargé par programmation est inclus dans la soumission.
  • Les erreurs de validation conservent le contenu et sont accessibles au clavier et au lecteur d’écran.
  • Le serveur rejette les requêtes directes invalides sans dépendre de JavaScript.

Essayez la démo d’envoi de formulaire, lisez pourquoi les champs obligatoires acceptent du HTML vide, ou consultez l’installation sur un textarea.