ErrorMessage

A mensagem que diz o que corrigir num campo, logo abaixo dele.

Playground

<div class="feitio-field"><label class="feitio-label" for="pg-em">Horário</label><input class="feitio-input" aria-invalid="true" aria-describedby="pg-em-error" data-width="10" id="pg-em" value="25:00"><span class="feitio-error-message" id="pg-em-error"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Use um horário entre 00:00 e 23:59</span></div>

Quando usar

• Quando um campo volta com problema: uma por campo, sempre junto do ErrorSummary no topo.

Quando não usar

• Para um problema da página toda (a conexão caiu): Notice com erro.
• Enquanto a pessoa ainda digita: não acuse erro antes de ela enviar.

Exemplos

<div class="feitio-field">
  …
  <span class="feitio-error-message" id="hora-erro">
    <svg class="feitio-icon" aria-hidden="true">…</svg>Use um horário entre 00:00 e 23:59
  </span>
</div>

Bons e maus padrões

Como escrever

• Diga como acertar, não só que errou.
• A mesma frase no campo e no resumo do topo.
• Sem "por favor", sem desculpa, sem exclamação.

Acessibilidade

• Ligada ao campo pelo aria-describedby, e o campo leva aria-invalid="true".
• Cor, ícone e palavra: o erro se lê sem distinguir o vinho.

Atributos