/
Formulärvalidering - Designmönster

Formulärvalidering - Designmönster

Användare behöver tydlig och kontextuell återkoppling när de fyller i formulär. Bristfällig validering leder till fel, frustration och avbrutna flöden. Validering ska därför stödja användaren i att förstå, rätta och slutföra sin inmatning på ett effektivt och tillgängligt sätt.

Användning

Mål

Säkerställa att användaren:

  • Förstår vad som förväntas i varje fält

  • Får tydlig feedback vid fel

  • Kan korrigera input utan onödig friktion

  • Känner trygghet när formuläret är korrekt ifyllt

 Använd när

  • Formulär innehåller krav på korrekt eller strukturerad data

  • Felaktig input kan påverka funktion, beslut eller säkerhet

  • Användaren behöver vägledning för att slutföra en uppgift

  • Flera fält är beroende av korrekt ifyllnad

 

Använd inte när

  • Input inte kräver validering (t.ex. fria anteckningar utan krav)

  • Feedback riskerar att störa användaren (t.ex. realtidsvalidering vid varje tangenttryck)

  • En enklare lösning (t.ex. förifyllda värden eller valbara alternativ) är mer lämplig

Riktlinjer

Beteende

  • Post submit validation:
    Validera alla fält när användaren försöker skicka formuläret. Visa samtliga fel samtidigt.

image-20260416-074645.png

  • Live inline validation:
    Validera fält när fokus lämnar input (on blur), inte under skrivande.

image-20260416-075034.png

  • Felhantering:

    • Sätt fokus på första felaktiga fältet

    • Behåll användarens input

    • Möjliggör snabb korrigering

 

  • Bekräftelse:
    Visa tydligt när formuläret är korrekt inskickat och vad eventuella nästa steg är.

image-20260416-075246.png

 

Visuell utformning

  • Fel markeras tydligt med färg, ikon och kontrast

  • Felmeddelanden är placerade i anknytning till respektive fält

  • Visa sammanfattning av fel vid större formulär

  • Använd konsekventa visuella mönster för:

    • Fel

    • Framgång

    • Fokus

  • Bekräftelsemeddelanden ska vara:

    • Tydligt synliga

    • Kontextuellt placerade (nära knapp eller högst upp)

 

Innehåll / copy

  • Använd tydligt och handlingsbart språk:

    • “Ange ett giltigt telefonnummer”

  • Undvik tekniska eller vaga formuleringar:

    • “Felaktigt värde”

  • Förklara vad som är fel och hur det kan rättas

  • Bekräftelsemeddelanden ska svara på:

    • Vad hände?

    • Vad händer nu?

Gör / Gör inte

Gör

  • Visa felmeddelanden nära fältet

  • Validera vid rätt tidpunkt (on blur eller submit)

  • Bekräfta när formuläret är korrekt

  • Behåll användarens data vid fel

Gör inte

  • Visa fel medan användaren skriver

  • Rensa formuläret efter felaktig submit

  • Dölja fel i enbart en global sammanfattning

  • Utelämna bekräftelse efter lyckad handling

Tillgänglighet

WCAG-relevanta principer:

  • 1.3.1 Info and Relationships – Felmeddelanden ska vara semantiskt kopplade till fält

  • 3.3.1 Error Identification – Fel ska identifieras tydligt

  • 3.3.3 Error Suggestion – Förslag på korrigering ska ges

  • 4.1.3 Status Messages – Bekräftelser ska kommuniceras till hjälpmedel

Riktlinjer:

  • Använd inte enbart färg för att indikera fel

  • Säkerställ tillräcklig kontrast

  • Felmeddelanden ska läsas upp av skärmläsare

  • Fokus ska flyttas till första fel vid submit

  • Alla interaktioner ska fungera med tangentbord

 

Sammanfattning

Formulärvalidering ska vara tydlig, kontextuell och tillgänglig.

Validera vid rätt tidpunkt, visa fel nära källan, hjälp användaren att rätta – och bekräfta alltid när allt är korrekt.