ErrorMessage

Die Nachricht, was zu beheben ist in einem Feld, direkt darunter.

Auf dieser Seite

Playground

UhrzeitNutze eine Uhrzeit zwischen 00:00 und 23:59

Text

Hintergrund

HTML

<div class="feitio-field"><label class="feitio-label" for="pg-em">Uhrzeit</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>Nutze eine Uhrzeit zwischen 00:00 und 23:59</span></div>

Wann verwenden

Wenn ein Feld ein Problem zurückgibt: pro Feld immer mit der ErrorSummary oben.

Wann nicht verwenden

Für ein ganzseitiges Problem (die Verbindung ist abgebrochen): eine Fehler-Notice.
Während die Person noch tippt: markieren Sie kein Fehler, bevor sie absenden.

Beispiele

Time

Use a time between 00:00 and 23:59

Unter dem Feld

Wein, fett, mit dem Icon, space-1 unter der Steuerung.

Code anzeigen

HTML

<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>

Do and don't

Write the email as name@example.com

Sagt genau, was zu tun ist, um es richtig zu machen.

Don’t

Invalid email!

"Ungültig" sagt nicht, was falsch ist, und der Ausrufezeichenpunkt schreit.

Schreiben

Sagen Sie, wie man es richtig macht, nicht nur, dass es falsch ist.
Der gleiche Satz im Feld und in der Zusammenfassung oben.
Kein "bitte", keine Entschuldigung, kein Ausrufezeichen.

Über aria-describedby mit dem Feld verbunden, und das Feld erhält aria-invalid="true".
Farbe, Symbol und Wort: der Fehler liest ohne zu sagen, was das Wein ist.

Attribute

Attribut	Werte	Zum Zweck
`class="feitio-error-message"`	erforderlich	Wein, fett, mit dem Symbol.
`id`	Text	So kann das Feld darauf hinweisen mit `aria-describedby`.