Validar um campo de formulário de texto rico

Um campo de texto rico obrigatório precisa de uma regra da aplicação. O HTML pode não estar vazio enquanto o documento não contém nenhum texto. Valide o conteúdo atual do editor, copie-o para o campo enviado e repita a regra no servidor.

1. Decida o que conta como conteúdo

Para a descrição de um chamado de suporte, você pode exigir texto. Para uma ferramenta de legendas de imagens, uma imagem enviada pode ser, sozinha, um documento válido. Uma verificação só de texto deve rejeitar de propósito um documento que contém apenas uma imagem, em vez de perder sem querer uma publicação válida.

Defina conteúdo obrigatório, tamanho mínimo do texto e tamanho máximo do payload como regras separadas. O tamanho do HTML conta a marcação; não é uma contagem de caracteres legíveis. Se você usa getCharCount() ou getPlainText(), verifique como a versão instalada trata espaços em branco, listas e quebras de linha antes de usar o resultado como regra de negócio.

2. Detecte texto vazio, não marcação vazia

// 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 exemplo rejeita parágrafos vazios, quebras de linha, espaços não separáveis e conteúdo que contém apenas imagens. Ele faz o parse em um template desconectado e nunca insere esse conteúdo na página ativa. É uma verificação de presença de texto, não um filtro de segurança nem um teste de layout visual: texto oculto por CSS e widgets específicos da aplicação precisam de uma política própria.

Para um tamanho mínimo, decida se você conta unidades de código, code points Unicode ou caracteres percebidos pelo usuário. O tamanho de uma string em JavaScript pode contar um emoji de forma diferente de um caractere visível. Use a mesma política nos dois lados da requisição.

3. Copie o HTML atual e mostre um erro ú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.
});

A validação nativa required do navegador não funciona de forma confiável como regra de campo obrigatório do editor depois que o textarea dele fica oculto. Mantenha a validação normal para os controles de formulário comuns, mas implemente a regra do editor com base no conteúdo atual dele. Não adicione uma restrição required nativa ao campo oculto de apoio esperando um erro que possa receber foco.

Mantenha o botão Save desabilitado até a inicialização terminar. Em caso de falha, preserve o rascunho, mostre uma mensagem visível perto do campo e devolva o foco ao editor. Associe a mensagem à superfície editável real usando os hooks de acessibilidade suportados pela sua integração; um atributo apenas no textarea oculto não rotula a superfície de edição.

Este trecho cobre apenas a validação síncrona de texto. Se houver imagens sendo enviadas, siga a sequência de conclusão do upload e salvamento antes de enviar o formulário. No React, leia o conteúdo atual no momento do envio, como descrito em estado do editor e salvamento.

4. Repita a validação depois da sanitização no servidor

Os clientes podem contornar as verificações do navegador. Autentique e autorize o salvamento, aplique limites de requisição e de armazenamento, sanitize o HTML com uma política mantida e baseada em parser e, depois, avalie se o documento aceito atende à sua regra de conteúdo. Um documento que contém apenas marcação rejeitada não deve virar um registro vazio aceito.

Retorne um erro específico do campo e mantenha o rascunho do usuário disponível. Nunca renderize HTML rejeitado sem escape em uma resposta de erro. Para exemplos em C# ou PHP de como receber e armazenar o conteúdo, comece pela demonstração da sua linguagem e pelo guia de armazenamento de texto rico.

Checklist de aceitação

• Editor vazio, parágrafos em branco e espaços não separáveis são rejeitados.
• Texto normal, texto formatado e os idiomas que seus usuários digitam são aceitos.
• Conteúdo que contém apenas imagens segue uma política explícita.
• Conteúdo carregado programaticamente é incluído no envio.
• Erros de validação preservam o conteúdo e podem ser alcançados com teclado e leitor de tela.
• O servidor rejeita requisições diretas inválidas sem depender de JavaScript.

Experimente a demonstração de envio de formulário, leia por que campos obrigatórios aceitam HTML vazio ou revise a instalação com textarea.