Form Validation & Errors

Main pattern

Help Text

Help text gives information up front so people know what to fill out in forms. Example:

https://appuniversum.github.io/ember-appuniversum/docs/atoms/au-helptextappuniversum.github.io

Error

Whenever something is not filled out or filled out incorrectly; it becomes clear with icons, colours and text.

example of error

https://appuniversum.github.io/ember-appuniversum/docs/atoms/au-form-input#error-inputappuniversum.github.io

Generic Form Validations and Errors

Field	Help Text	Error
Mandatory field: free form Verplicht veld: vrij Can be combined with other fields		Vul het veld in.
Mandatory field: select Verplicht veld: selectie Can be combined with other fields		Selecteer een optie.
Mandatory field: fill out at least on of these fields Verplicht veld: vul een van beide (of meerdere) velden in. Can be combined with other fields		Vul een van beide velden in: Naam of Naam.
Phone number Telefoonnummer	Bijvoorbeeld: [phone].	Enkel een plusteken en cijfers toegelaten.
Website	Bijvoorbeeld: http://www.website.com	Geef een geldig internetadres in.
Email address E-mail adres	Bijvoorbeeld: [e-mail]	Geef een geldig e-mailadres in
Date Datum	Formaat: DD/MM/JJJJ	Geef een geldige datum in.
Social Security Number Rijksregisternummer	Formaat: 00.00.00-000.00	If duplicate Rijksregisternummer moet uniek zijn (indien ingevuld). Deze persoon bestaat al in de database. If faulty Geef een geldig rijksregisternummer in.

Future improvements

Phone numbers

Make the pattern easier to follow and the data more consistent by already providing land codes and flags for delight in a drop down:

https://dribbble.com/shots/15474151-Phone-Number-Input-Field-Exploration

URL's

Make the field easier to complete and the data more consistent by already foreseeing https:// in the field.

https://dribbble.com/shots/5735249-Design-System-Text-Field

Adress

We don't have CRAB integration everywhere yet.

Basic Form Validation for an Address

Field	Help Text	Error
Adres: Straat		Vul het volledige adres in.
Adres: Huisnummer		Vul het volledige adres in.
Adres: Busnummer
Adres: Postcode		Vul het volledige adres in
Adres: Gemeente		Vul het volledige adres in.
Adres: Provincie		Vul het volledige adres in.

Crab integration

1. Type the address

2. Add the bus number

You can, if the address or bus number is not available, get in touch with the help desk so they can get in touch with CRAB to add it.

Two separate fields for address and bus number

An address is only available if they are available in the CRAB database.

Bus numbers are only available if they are available in the CRAB database.

Filled out fields

Empty state for address