HTMLhulp.nl logo

Formuliervalidatie zorgt ervoor dat gebruikers correcte gegevens invoeren. Met HTML5 zijn veel validaties al standaard ingebouwd, maar je kunt deze uitbreiden met JavaScript.

Basis HTML5-validatie attributen

AttribuutBeschrijvingVoorbeeld
requiredVeld is verplicht<input type="text" required>
minlengthMinimale lengte tekst<input type="text" minlength="5">
maxlengthMaximale lengte tekst<input type="text" maxlength="10">
minMinimumwaarde<input type="number" min="18">
maxMaximumwaarde<input type="number" max="100">
stepInterval voor nummers<input type="number" step="5">
patternRegex-validatie<input type="text" pattern="[0-9]{5}">
type="email"Checkt op geldig e-mailadres<input type="email">
type="url"Checkt op geldig webadres<input type="url">
type="date"Datumkiezer, valideert datumformaat<input type="date">

Voorbeeld HTML-formulier met validatie

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

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

<label for="wachtwoord">Wachtwoord</label>
<input type="password" id="wachtwoord" name="wachtwoord" required minlength="8">

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

Validatie met JavaScript

Gebruik JavaScript om extra controles te doen of foutmeldingen aan te passen.

Check met checkValidity()

let input = document.getElementById("email");

if (!input.checkValidity()) {
console.log(input.validationMessage);
}

Custom foutmeldingen met setCustomValidity()

let wachtwoord = document.getElementById("wachtwoord");

wachtwoord.addEventListener("input", function() {
if (wachtwoord.value.length < 8) {
wachtwoord.setCustomValidity("Het wachtwoord moet minimaal 8 tekens lang zijn");
} else {
wachtwoord.setCustomValidity("");
}
});

Formulier validatie blokkeren bij ongeldige invoer

document.querySelector("form").addEventListener("submit", function(e) {
if (!this.checkValidity()) {
e.preventDefault();
alert("Controleer de invoer, sommige velden zijn ongeldig.");
}
});

Pseudo-classes voor styling

SelectorBeschrijvingVoorbeeld
:requiredSelecteert verplichte veldeninput:required { border: 2px solid red; }
:optionalSelecteert niet-verplichte veldeninput:optional { border: 2px solid green; }
:validSelecteert geldige invoerinput:valid { border-color: green; }
:invalidSelecteert ongeldige invoerinput:invalid { border-color: red; }

Best practices

  • Gebruik altijd server-side validatie naast HTML/JS-validatie (beveiliging).

  • Combineer required, pattern en type voor nauwkeurige controles.

  • Geef duidelijke foutmeldingen, liefst naast of onder het veld.

  • Gebruik CSS voor directe visuele feedback.

  • Test validatie zowel met toetsenbord als schermlezers voor toegankelijkheid.