4.1.8 Bij het valideren wordt foutieve invoer gemarkeerd en tekstueel toegelicht

Als er bij het valideren van een formulier fouten zijn gevonden, vermeldt u de aard van de fout en markeert u de plaats van de fout.

Plaats van de fout

Drie mogelijkheden:

  • Voeg een icoon (zoals een uitroepteken) of een korte tekstbeschrijving toe aan de velden die een fout bevatten.
  • Som bovenaan het formulier de foutmeldingen op.
  • Open een alert box met de foutmeldingen.

Om aan dit ijkpunt te voldoen, is één van deze mogelijkheden voldoende. We bevelen aan om de eerste mogelijkheid te combineren met ofwel de tweede ofwel de derde.

Aard van de fout

Geef duidelijke feedback over wat er fout is en hoe de gebruiker het kan oplossen. Verwijs in de foutmelding naar het label van het formulierveld waar de fout zich voordoet. Voorbeeld: als het label "paswoord" is, zeg dan in de foutmelding niet "het wachtwoord is niet juist".

Voorbeeld (niet goed)

Zorg ervoor dat een afwijkende kleur of opmaak nooit het enige middel is om een fout te markeren.

screenshot formulier met rood gemarkeerde velden

<h1>Aanvraagformulier</h1>
<p>Het formulier kon niet worden verzonden. Corrigeer de rood gemarkeerde velden.</p>
<form>
  <div>
    <label for="naam">Naam</label>
    <input type="text" value="Bert Jansens" id="naam" name="naam" />
  </div>
  <div class="fout">
    <label for="email">E-mailadres</label>
    <input type="text" class="fout" value="bert.jansens@telenet" id="email" name="email" />
  </div>
  <div>
    <label for="straat">Straat</label>
    <input type="text" value="Kerkstraat" id="straat" name="straat" />
  </div>
  <div class="fout">
    <label for="huisnummer">Huisnummer</label>
    <input class="fout" type="text" value="" id="huisnummer" name="huisnummer" />
  </div>
  <input type="submit" value="Verstuur" />
</form>
input.fout {
  border: 2px solid red;
}

Voorbeeld (goed)

In dit voorbeeld staan bovenaan de foutmeldingen bij elkaar. Daarnaast is visueel aangegeven welke velden fouten bevatten. Dit is voldoende, maar zeker voor lange formulieren zou het beter zijn de foutmeldingen te herhalen bij de velden of de velden ook op een andere manier te markeren dan enkel met een rode kleur.

Schermafbeelding van een formulier met validatieboodschappen

<h1>Aanvraagformulier</h1>
<h2>U hebt twee fouten gemaakt:</h2>

<ul>
  <li>U hebt een ongeldig e-mailadres ingevuld</li>
  <li>Het huisnummer ontbreekt</li>
</ul>

<form>
  <div>
    <label for="naam">Naam</label>
    <input type="text" value="Bert Jansens" id="naam" name="naam" />
  </div>
  <div class="fout">
    <label for="email">E-mailadres</label>
    <input type="text" class="fout" value="bert.jansens@telenet" id="email" name="email" />
  </div>
  <div>
    <label for="straat">Straat</label>
    <input type="text" value="Kerkstraat" id="straat" name="straat" />
  </div>
  <div class="fout">
    <label for="huisnummer">Huisnummer</label>
    <input class="fout" type="text" value="" id="huisnummer" name="huisnummer" />
  </div>
  <input type="submit" value="Verstuur" />
</form>
input.fout {
  border: 2px solid red;
}

Voorbeeld (beter)

Schermafbeelding van een formulier met validatieboodschappen

<h1>Aanvraagformulier</h1>
<h2>U hebt twee fouten gemaakt:</h2>
<ul>
  <li>U hebt een ongeldig e-mailadres ingevuld</li>
  <li>Het huisnummer ontbreekt</li>
</ul>

<form>
  <div>
    <label for="naam">Naam</label>
    <input type="text" value="Bert Jansens" id="naam" name="naam" />
  </div>
  <div class="fout">
    <label for="email">E-mailadres (ongeldig)</label>
    <input type="text" class="fout" value="bert.jansens@telenet" id="email" name="email" />
  </div>
  <div>
    <label for="straat">Straat</label>
    <input type="text" value="Kerkstraat" id="straat" name="straat" />
  </div>
  <div class="fout">
    <label for="huisnummer">Huisnummer (niet ingevuld)</label>
    <input class="fout" type="text" value="" id="huisnummer" name="huisnummer" />
  </div>
  <input type="submit" value="Verstuur" />
</form>
input.fout {
  border: 2px solid red;
}

Aanbeveling

Het is altijd aan te bevelen duidelijke feedback te geven na het verzenden van een formulier. Zowel bij succes als bij fouten. Een regeltje als "Uw gegevens zijn correct verzonden" of "De vragenlijst kon niet worden verzonden. Corrigeer onderstaande fouten en probeer het opnieuw" is al voldoende.

Zelf testen

Verstuur het formulier zonder het in te vullen.
Controleer of de foutmelding de plaats en aard van de fout vermeld.

  1. Is er tekstueel boven het formulier beschreven welke velden fout zijn;
    • Ja; Is de aard van de fout ook beschreven op dezelfde plaats?
      • Ja; dan is aan dit ijkpunt voldaan
      • Nee; ga naar vraag 2
    • Nee; ga naar vraag 2
  2. Is er bij elk veld dat in fout is binnen het label aangeduid dat het fout of niet ingevuld is;
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; ga naar vraag 3
  3. Worden de fouten duidelijk beschreven in een alert box/dialoogvenster?
    • Ja; dan is aan dit ijkpunt voldaan.
    • Nee; pas uw website aan.