Error State — wat is het, weergave van veldfouten en implementatie in Android

Wat is de foutstatus van een veld in Android?

Error State is een speciale weergavemodus van een invoerveld die wordt geactiveerd wanneer ingevoerde gegevens niet door validatie komen. Visueel omvat Error State drie componenten: verandering van de rand- of achtergrondkleur van het veld (meestal rood), verschijnen van een tekstbericht onder het veld met een beschrijving van de fout en optioneel — een pictogram of oplichting. Het doel van Error State is om onmiddellijk de aandacht van de gebruiker te trekken naar het problematische veld en te adviseren hoe de fout te herstellen.

In Android is Error State geïmplementeerd op het niveau van TextInputLayout uit Material Design Components. TextInputLayout omhult EditText en beheert de statussen: normal, focused, error, disabled. De methode setError(String) schakelt het veld naar de foutstatus, verandert de randkleur en toont het bericht. Bij tekstwijziging of het aanroepen van setError(null) keert het veld terug naar normal.

Volgens de Material Design Guidelines moet Error State opvallend maar niet dominant zijn. De rode randkleur moet contrasteren met de normale status maar de interface niet overbelasten. Het foutbericht moet specifieke informatie bevatten over het probleem en hoe het op te lossen. Het foutpictogram (bijv. een rode cirkel met uitroepteken) versterkt het visuele signaal.

Hoe werkt setError in TextInputLayout

De methode setError(CharSequence errorText) schakelt TextInputLayout naar de foutstatus. De parameter errorText is de tekst die onder het veld wordt weergegeven. Als null wordt doorgegeven, wordt de fout gereset. TextInputLayout beheert de animatie: de fouttekst verschijnt met een vloeiende overgang, de rand verandert naar rood. Het foutpictogram (standaard een uitroepteken in een cirkel) wordt aan het einde van het veld weergegeven.

Belangrijke details: setErrorEnabled(true) moet worden aangeroepen vóór setError om ruimte te reserveren voor het foutbericht. Anders kan de layout „springen” bij het verschijnen van de fout omdat de ruimte voor het bericht niet is gereserveerd. Het wordt aanbevolen om altijd foutondersteuning in XML in te schakelen via app:errorEnabled="true" om layoutverschuiving te voorkomen.

De methode setError wordt automatisch gereset bij tekstwijziging van het veld als de optie setErrorEnabled(true) is ingeschakeld. Dit gedrag is handig voor realtime validatie: zodra de gebruiker begint met het corrigeren van de fout, verdwijnt de rode rand en keert het veld terug naar de normale status. Voor complexe scenario's kan deze automatische reset echter ongewenst zijn — beheer de fout in dergelijke gevallen handmatig.

val til = findViewById<TextInputLayout>(R.id.til_email)

// Foutondersteuning inschakelen (anders instellen in XML)
til.isErrorEnabled = true

// Foutbericht instellen
til.error = "Invalid email address"

// Fout wissen
til.error = null

// Controleren of er een fout bestaat
if (til.error != null) {
    // Veld is in foutstatus
}

In het voorbeeld worden Kotlin-eigenschappen gebruikt voor toegang tot setError/isErrorEnabled. TextInputLayout werkt de UI automatisch bij: verandert de boxStrokeColor-kleur, toont het foutpictogram, geeft de fouttekst weer. Als u de tekst in EditText wijzigt, wordt de fout automatisch gereset. Voor handmatig resetten stelt u error = null in.

Alternatieve manieren om fouten weer te geven

Niet alle projecten gebruiken Material Design Components. Voor aangepaste weergave van fouten kunt u een aparte TextView onder EditText gebruiken die zichtbaar wordt bij een fout. Deze aanpak biedt volledige controle over stijlen en berichtplaatsing. U kunt het bericht bijvoorbeeld rechts van het veld plaatsen, een andere achtergrondkleur gebruiken of een pictogram links van de tekst toevoegen.

In Jetpack Compose wordt Error State geïmplementeerd via de parameter isError in OutlinedTextField of TextField. Bij isError = true wordt de rand rood en kunt u de fouttekst weergeven via supportingText. Compose heeft geen ingebouwde automatische wissen bij tekstwijziging — de ontwikkelaar beheert de foutstatus handmatig via remember en mutableStateOf.

Voor groepsfouten (één bericht voor meerdere velden, bijv. „Vul alle verplichte velden in”) wordt Snackbar, Dialog of een inline-blok boven in het formulier gebruikt. Een groepsfout vervangt de Error State van individuele velden niet, maar vult deze aan. De gebruiker ziet eerst het algemene bericht en zoekt vervolgens naar specifieke velden met fouten.

Kleuren, pictogrammen en animatie van fouten

De kleur van Error State in Material Design Components wordt beheerd via het attribuut boxStrokeErrorColor of het attribuut colorError in het thema. Standaard wordt de systeemrode kleur gebruikt, maar deze kan worden overschreven in het thema van de app of rechtstreeks in TextInputLayout via app:boxStrokeErrorColor="@color/customErrorColor". Voor ondersteuning van het donkere thema wordt aanbevolen een selector te gebruiken met verschillende kleuren voor lichte en donkere modi.

Het foutpictogram wordt geconfigureerd via app:errorIconDrawable. Standaard wordt een uitroepteken in een cirkel weergegeven. Het kan worden vervangen door een aangepast pictogram of volledig worden verwijderd door app:errorIconDrawable="@null" in te stellen. Het pictogram wordt aan het einde van TextInputLayout weergegeven en dient als extra visuele marker. In Material Design 3 is het foutpictogram verplicht voor toegankelijkheid.

Animaties van foutverschijning is ingebouwd in TextInputLayout: de tekst komt van onderen met een vloeiende verandering van doorzichtigheid. Voor aangepaste animatie gebruikt u Transition API of MotionLayout. Bijvoorbeeld, het schudden van het veld bij een fout trekt extra aandacht. Maar overmatig gebruik van animatie verslechtert de UX — een vloeiende verschijning van het bericht is voldoende.

Foutstatus beheren bij validatie

Het beheer van Error State is verdeeld in twee fasen: het instellen van de fout bij veldvalidatie en het resetten van de fout bij correctie. In het eenvoudigste geval wordt validatie aangeroepen in TextWatcher.afterTextChanged: als de waarde ongeldig is, wordt setError aangeroepen met een foutbericht. Als deze geldig is — setError(null). TextInputLayout verbergt automatisch de fout wanneer setError(null) de status reset.

Voor formuliervalidatie worden fouten ingesteld in de verzendfase van het formulier. Doorloop alle velden, controleer elk, stel fouten in voor ongeldige velden en focus op het eerste foute veld. De verzendknop wordt hierbij geblokkeerd. Als het formulier groot is, wordt aanbevolen het scherm naar het eerste veld met een fout te scrollen en er automatisch focus op te zetten.

De regel single error focus: stel bij het verzenden van het formulier alleen focus op het eerste veld met een fout. De gebruiker corrigeert één fout tegelijk en na correctie krijgt het volgende veld met een fout automatisch focus. Deze stapsgewijze aanpak vermindert de cognitieve belasting. Material TextInputLayout onderschept de focus niet bij het instellen van een fout — dit moet handmatig via requestFocus().

Fouten bij het werken met Error State

De eerste fout — ontbreken van isErrorEnabled. Als setErrorEnabled niet is aangeroepen vóór setError, kan de layout verschuiven bij het verschijnen van het foutbericht. Dit is vooral kritisch als het veld zich in het midden van het scherm bevindt — de gebruiker verliest de scrollpositie. Schakel altijd setErrorEnabled(true) in via app:errorEnabled="true" in XML of programmatisch voordat u een fout instelt.

De tweede fout — te lang foutbericht. Lange tekst wordt over meerdere regels verdeeld en kan aangrenzende velden bedekken. De aanbevolen lengte van een foutbericht is 20-40 tekens. Als meer informatie nodig is, gebruik dan helperText (tip) in de normale status of een tooltip voor extra uitleg. Beknoptheid is de basis van een goede Error State.

De derde fout — negeren van toegankelijkheid. Error State moet toegankelijk zijn voor schermlezers. TextInputLayout kondigt de fout automatisch aan via contentDescription, maar aangepaste implementaties moeten dit handmatig doen. Gebruik announceForAccessibility() of android:importantForAccessibility voor foutberichten. TalkBack-gebruikers moeten de fout onmiddellijk horen nadat deze verschijnt.