# ErrorMessage

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

## Playground

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

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

Do

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.

## Barrierefreiheit

-   Ü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`.