HTMLhulp.nl logo
Formuliervalidatie met HTML5-attributen: required, pattern en meer

Formuliervalidatie met HTML5-attributen: required, pattern en meer

Formuliervalidatie met HTML5-attributen: required, pattern en meer

Een formulier is vaak de plek waar een bezoeker klant of lead wordt. Maar als het formulier fouten bevat of niet duidelijk is, kan dit leiden tot frustratie en afhaken. Daarom is validatie onmisbaar. Met HTML5 zijn veel validatiefuncties direct ingebouwd, zonder dat je meteen JavaScript hoeft te gebruiken. Attributen zoals required, pattern en type maken formulieren gebruiksvriendelijker en veiliger. In dit artikel leer je hoe HTML5-formuliervalidatie werkt, welke attributen er zijn en hoe je ze slim inzet.

Wat is formuliervalidatie?

Formuliervalidatie controleert of de gegevens die een gebruiker invoert correct en volledig zijn voordat het formulier verzonden wordt.

  • Client-side validatie → in de browser, direct feedback aan de gebruiker.

  • Server-side validatie → op de server, noodzakelijk als extra beveiliging.

HTML5 richt zich op client-side validatie en bespaart veel werk.

Het attribuut required

Met required maak je een veld verplicht.

<label for="email">E-mailadres</label>
<input type="email" id="email" name="email" required>

Als de gebruiker het veld leeg laat, verschijnt automatisch een foutmelding van de browser.

Input types en automatische validatie

Verschillende type-waarden zorgen automatisch voor validatie.

  • type="email" → controleert of er een @ en domein aanwezig is.

  • type="url" → controleert of er een geldig webadres wordt ingevoerd.

  • type="number" → alleen getallen toegestaan.

  • type="date" → controleert of het een geldige datum is.

Voorbeeld:

<input type="url" name="website" required>

Het attribuut pattern

Met pattern kun je reguliere expressies gebruiken om invoer nauwkeurig te controleren.

Voorbeeld: alleen 4 cijfers toestaan (zoals een pincode):

<input type="text" name="pincode" pattern="[0-9]{4}" required>

Als iemand iets anders invult, verschijnt er een foutmelding.

Attributen voor getallen

  • min en max → begrenzen de waarde.

  • step → bepaalt met welke stappen de waarde verhoogd of verlaagd kan worden.

Voorbeeld:

<input type="number" name="aantal" min="1" max="10" step="1">

Het attribuut maxlength

Beperk het aantal toegestane karakters.

<input type="text" name="gebruikersnaam" maxlength="12">

Voorbeeld: compleet formulier met validatie

<form>
<label for="naam">Naam</label>
<input type="text" id="naam" name="naam" required maxlength="50">

<label for="email">E-mailadres</label>
<input type="email" id="email" name="email" required>

<label for="telefoon">Telefoonnummer</label>
<input type="tel" id="telefoon" name="telefoon" pattern="[0-9]{10}" placeholder="0612345678">

<label for="leeftijd">Leeftijd</label>
<input type="number" id="leeftijd" name="leeftijd" min="18" max="99">

<button type="submit">Versturen</button>
</form>

Dit formulier controleert automatisch of alle velden correct zijn ingevuld voordat het wordt verstuurd.

Aangepaste foutmeldingen

Browsers tonen standaard foutmeldingen, maar je kunt ze aanpassen met JavaScript.

Voorbeeld:

const email = document.getElementById("email");
email.addEventListener("input", function () {
if (email.validity.typeMismatch) {
email.setCustomValidity("Voer een geldig e-mailadres in.");
} else {
email.setCustomValidity("");
}
});

Toegankelijkheid en validatie

  • Gebruik altijd <label>-elementen voor duidelijke koppeling.

  • Zet foutmeldingen naast of onder de velden.

  • Gebruik aria-describedby om foutmeldingen te koppelen.

Voorbeeld:

<input type="text" id="naam" aria-describedby="naam-error" required>
<span id="naam-error" class="error">Naam is verplicht</span>

Veelgemaakte fouten bij HTML5-validatie

  1. Alleen vertrouwen op client-side validatie → altijd ook server-side controleren.

  2. Placeholders gebruiken in plaats van labels.

  3. Onbegrijpelijke foutmeldingen laten staan.

  4. Te strenge pattern-regels, waardoor geldige invoer wordt afgewezen.

  5. Validatie vergeten op verborgen velden of dynamische velden.

Tips voor betere validatie

  • Combineer ingebouwde HTML5-validatie met server-side controles.

  • Gebruik duidelijke foutmeldingen in gewone taal.

  • Test formulieren op verschillende apparaten en browsers.

  • Houd de balans: niet te streng, maar ook niet te los.

  • Gebruik attributen als required, pattern, min, max slim voor gebruiksgemak.

Met HTML5-validatie maak je formulieren sneller, veiliger en gebruiksvriendelijker zonder veel extra code. Het is een eenvoudige maar krachtige manier om de kwaliteit van gebruikersinvoer te waarborgen.