Validar un campo de formulario de texto enriquecido

Un campo de texto enriquecido obligatorio necesita una regla de la aplicación. El HTML puede no estar vacío aunque el documento no contenga texto. Valida el contenido actual del editor, cópialo en el campo que se envía y repite la regla en el servidor.

1. Decide qué cuenta como contenido

Para la descripción de un ticket de soporte, puedes exigir texto. Para una herramienta de pies de foto, una imagen subida puede ser por sí sola un documento válido. Una comprobación solo de texto debe rechazar a propósito un documento que solo contiene una imagen, y no perder por accidente una publicación válida.

Define como reglas separadas el contenido obligatorio, la longitud mínima del texto y el tamaño máximo de la carga útil. La longitud del HTML cuenta el marcado; no es un recuento de caracteres legibles. Si usas getCharCount() o getPlainText(), comprueba cómo trata tu versión instalada los espacios en blanco, las listas y los saltos de línea antes de usar su resultado como regla de negocio.

2. Detecta el texto vacío, no el marcado vacío

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

Este ejemplo rechaza los párrafos vacíos, los saltos de línea, los espacios de no separación y el contenido formado solo por imágenes. Analiza el HTML en una plantilla desconectada y nunca inserta ese contenido en la página real. Es una comprobación de presencia de texto, no un filtro de seguridad ni una prueba del diseño visual: el texto oculto con CSS y los widgets propios de la aplicación necesitan su propia política.

Para una longitud mínima, decide si cuentas unidades de código, puntos de código Unicode o caracteres tal como los percibe el usuario. La longitud de una cadena de JavaScript puede contar un emoji de forma distinta a un carácter visible. Usa la misma política en ambos lados de la solicitud.

3. Copia el HTML actual y muestra un error útil

// 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 validación nativa required del navegador no puede servir de forma fiable como regla de campo obligatorio del editor una vez que su textarea está oculto. Mantén la validación normal para los controles de formulario corrientes, pero implementa la regla del editor sobre su contenido actual. No añadas una restricción required nativa al campo oculto que hay detrás ni esperes un error que reciba el foco.

Mantén Save desactivado hasta que termine la inicialización. Si falla, conserva el borrador, muestra un mensaje visible junto al campo y devuelve el foco al editor. Asocia el mensaje con la superficie editable real usando los hooks de accesibilidad que admita tu integración; un atributo en un textarea oculto, por sí solo, no etiqueta la superficie de edición.

Este fragmento solo cubre la validación síncrona del texto. Si hay imágenes subiéndose, sigue la secuencia de fin de carga y guardado antes de enviar. En React, lee el contenido actual en el momento del envío, como se describe en estado del editor y guardado.

4. Repite la validación después de sanear en el servidor

Los clientes pueden saltarse las comprobaciones del navegador. Autentica y autoriza el guardado, aplica los límites de solicitud y de almacenamiento, sanea el HTML con una política basada en un analizador mantenido y después evalúa si el documento aceptado cumple tu regla de contenido. Un documento que solo contiene marcado rechazado no debe convertirse en un registro vacío aceptado.

Devuelve un error específico del campo y mantén disponible el borrador del usuario. Nunca muestres sin escapar el HTML rechazado en una respuesta de error. Para ver ejemplos en C# o PHP de cómo recibir y guardar contenido, empieza por la demo de tu lenguaje y la guía de almacenamiento de texto enriquecido.

Lista de comprobación de aceptación

• Se rechazan el editor vacío, los párrafos en blanco y los espacios de no separación.
• Se aceptan el texto normal, el texto con formato y los idiomas en que escriben tus usuarios.
• El contenido formado solo por imágenes sigue una política explícita.
• El contenido cargado desde código se incluye en el envío.
• Los errores de validación conservan el contenido y se puede llegar a ellos con el teclado y el lector de pantalla.
• El servidor rechaza las solicitudes directas no válidas sin depender de JavaScript.

Prueba la demo de envío de formularios, lee por qué los campos obligatorios aceptan HTML vacío o revisa la instalación en un textarea.