← Gesamte Dokumentation

Ein Rich-Text-Formularfeld validieren

Ein Rich-Text-Pflichtfeld braucht eine Regel Ihrer Anwendung. HTML kann nicht leer sein, während das Dokument keinen Text enthält. Validieren Sie den aktuellen Inhalt des Editors, kopieren Sie ihn in das gesendete Feld und wiederholen Sie die Regel auf dem Server.

1. Festlegen, was als Inhalt zählt

Für die Beschreibung eines Support-Tickets verlangen Sie vielleicht Text. In einem Werkzeug für Bildunterschriften kann ein hochgeladenes Bild für sich allein ein gültiges Dokument sein. Eine reine Textprüfung muss ein Dokument, das nur aus einem Bild besteht, bewusst ablehnen, statt versehentlich einen gültigen Beitrag zu verlieren.

Definieren Sie Pflichtinhalt, minimale Textlänge und maximale Payload-Größe als getrennte Regeln. Die Länge des HTML zählt Markup mit; sie ist keine Zählung lesbarer Zeichen. Wenn Sie getCharCount() oder getPlainText() verwenden, prüfen Sie, wie Ihre installierte Version Leerraum, Listen und Zeilenumbrüche behandelt, bevor Sie das Ergebnis als Geschäftsregel verwenden.

2. Leeren Text erkennen, nicht leeres Markup

// 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;
}

Dieses Beispiel lehnt leere Absätze, Zeilenumbrüche, geschützte Leerzeichen und reine Bildinhalte ab. Es parst in ein losgelöstes Template und fügt diesen Inhalt nie in die laufende Seite ein. Es prüft, ob Text vorhanden ist, und ist weder ein Sicherheitsfilter noch ein Test des visuellen Layouts: Per CSS versteckter Text und anwendungsspezifische Widgets brauchen eine eigene Regel.

Legen Sie für eine Mindestlänge fest, ob Sie Code Units, Unicode-Codepoints oder vom Benutzer wahrgenommene Zeichen zählen. Die Stringlänge in JavaScript kann ein Emoji anders zählen als ein sichtbares Zeichen. Verwenden Sie auf beiden Seiten des Requests dieselbe Regel.

3. Das aktuelle HTML kopieren und einen hilfreichen Fehler anzeigen

// 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.
});

Die native Validierung required des Browsers kann nicht zuverlässig als Pflichtfeldregel des Editors dienen, sobald dessen textarea versteckt ist. Behalten Sie die normale Validierung für gewöhnliche Formularelemente bei, setzen Sie die Regel für den Editor aber gegen dessen aktuellen Inhalt um. Fügen Sie dem versteckten zugrunde liegenden Feld keine native required-Bedingung hinzu und erwarten Sie dann einen fokussierbaren Fehler.

Lassen Sie Speichern deaktiviert, bis die Initialisierung abgeschlossen ist. Bei einem Fehler bewahren Sie den Entwurf, zeigen eine sichtbare Meldung in der Nähe des Felds an und setzen den Fokus zurück in den Editor. Verknüpfen Sie die Meldung mit der tatsächlichen Bearbeitungsfläche über die Barrierefreiheits-Hooks, die Ihre Integration unterstützt; ein Attribut an einer versteckten textarea allein beschriftet die Bearbeitungsfläche nicht.

Dieses Snippet deckt nur die synchrone Textvalidierung ab. Werden gerade Bilder hochgeladen, folgen Sie vor dem Absenden der Abfolge aus Upload-Abschluss und Speichern. In React lesen Sie den aktuellen Inhalt beim Absenden, wie in Editor-State und Speichern beschrieben.

4. Die Validierung nach der serverseitigen Bereinigung wiederholen

Clients können Prüfungen im Browser umgehen. Authentifizieren und autorisieren Sie das Speichern, setzen Sie Limits für Requests und Speicher durch, bereinigen Sie das HTML mit einer gepflegten, parserbasierten Regel und prüfen Sie dann, ob das angenommene Dokument Ihre Inhaltsregel erfüllt. Ein Dokument, das nur abgelehntes Markup enthält, darf nicht zu einem angenommenen leeren Datensatz werden.

Geben Sie einen feldspezifischen Fehler zurück und halten Sie den Entwurf des Benutzers verfügbar. Geben Sie abgelehntes HTML in einer Fehlerantwort nie unmaskiert aus. Für Beispiele in C# oder PHP zum Empfangen und Speichern von Inhalten beginnen Sie mit der Demo für Ihre Sprache und der Anleitung zum Speichern von Rich Text.

Checkliste für die Abnahme

  • Leerer Editor, leere Absätze und geschützte Leerzeichen werden abgelehnt.
  • Normaler Text, formatierter Text und die Sprachen, in denen Ihre Benutzer schreiben, werden angenommen.
  • Für reine Bildinhalte gilt eine ausdrückliche Regel.
  • Per Code geladener Inhalt wird beim Absenden mitgesendet.
  • Validierungsfehler bewahren den Inhalt und sind mit Tastatur und Screenreader erreichbar.
  • Der Server lehnt ungültige direkte Requests ab, ohne sich auf JavaScript zu verlassen.

Probieren Sie die Demo zum Absenden von Formularen aus, lesen Sie, warum Pflichtfelder leeres HTML annehmen, oder sehen Sie sich die Installation auf einer textarea an.