Attributen voor formuliervalidatie
Pas de attributen required, minlength, maxlength, pattern, min, max en step toe en geef validatietoestanden stijl met de pseudoklassen :valid en :invalid.
Attributen voor formuliervalidatie is een gratis Frontend Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Ingebouwde browservalidatie
HTML5 biedt ingebouwde formuliervalidatie via attributen. Wanneer een formulier wordt verstuurd, valideert de browser elk veld. Als de validatie mislukt, toont de browser een ingebouwde foutmelding als tooltip en voorkomt hij dat het formulier wordt verstuurd — voor eenvoudige gevallen is geen JavaScript nodig.
required
Als je required toevoegt aan een invoerveld, select of textarea, wordt het veld verplicht. De browser toont een foutmelding als het veld leeg is wanneer het formulier wordt verstuurd.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength en maxlength
minlength legt een minimaal aantal tekens op. maxlength voorkomt invoer boven een maximum. Combineer ze om de complexiteit van wachtwoorden af te dwingen of de lengte van reacties te beperken.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max en step voor numerieke invoer
min en max stellen het geldige bereik in voor getal- en datuminvoer. step stelt de stapgrootte in — nuttig voor bereiken (5%), decimale precisie en alleen-datumwaarden.
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — Validatie met reguliere expressies
pattern accepteert een reguliere expressie in JavaScript. De invoer moet overeenkomen met het patroon voordat het formulier kan worden verstuurd. Voeg een title toe om de verwachte indeling in de fouttooltip van de browser te beschrijven.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — Ingebouwde validatie uitschakelen
Voeg novalidate toe aan het element <form> om alle ingebouwde browservalidatie uit te schakelen. Doe dit wanneer je aangepaste JavaScript-validatie implementeert, zodat de gebruiker één consistente ervaring krijgt.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Geldigheid controleren in JavaScript
Met de Constraint Validation API kun je programmatisch de geldigheid controleren: input.validity (een ValidityState-object), input.checkValidity() (geeft een boolean terug) en input.setCustomValidity(message) (stelt een aangepaste foutmelding in).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Roep setCustomValidity(message) aan met een niet-lege tekenreeks om een invoerveld met een aangepaste melding als ongeldig te markeren. Roep de methode aan met een lege tekenreeks om de fout te wissen. Dit is handig voor velden die door de server worden gevalideerd, zoals de uniciteit van een gebruikersnaam.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid en :invalid-pseudoklassen
Geef geldige en ongeldige invoervelden op met CSS-pseudoklassen. Let op: invoervelden zijn al :invalid voordat je ermee hebt geïnterageerd. Gebruik :user-invalid (in moderne browsers) of JavaScript om eerst een klasse 'touched' toe te voegen.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Aangepaste foutmeldingen met reportValidity
form.reportValidity() activeert de ingebouwde validatie-interface van de browser voor alle velden. Gebruik dit nadat je aangepaste geldigheidsmeldingen hebt ingesteld, zodat je ze aan de gebruiker kunt tonen zonder op een submit-gebeurtenis te wachten.
Toegankelijk patroon voor foutweergave
Toon inlinefouten met: 1) aria-invalid="true" op het invoerveld, 2) een zichtbare foutparagraaf die met aria-describedby is gekoppeld, 3) verplaats de focus naar het eerste ongeldige veld. Hiermee bedien je alle gebruikers, ook gebruikers van schermlezers.
Korte controle
Welk attribuut beperkt een tekstinvoerveld tot maximaal 280 tekens?
Samenvatting: attributen voor formuliervalidatie
required, minlength/maxlength, min/max/step, pattern — ze bieden allemaal gratis ingebouwde browservalidatie. Gebruik novalidate wanneer je aangepaste JavaScript-validatie implementeert. De Constraint Validation API geeft JavaScript toegang tot de geldigheidsstatus. Geef fouten op met :user-invalid nadat de gebruiker met het veld heeft geïnterageerd.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Attributen voor formuliervalidatie” gratis?
Ja — de volledige tekst van “Attributen voor formuliervalidatie” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Attributen voor formuliervalidatie”?
Pas de attributen required, minlength, maxlength, pattern, min, max en step toe en geef validatietoestanden stijl met de pseudoklassen :valid en :invalid. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Attributen voor formuliervalidatie”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Formulierbesturingen: inputtypen, select en textarea
- ARIA en toegankelijkheid: label, role en aria-*
- Semantische HTML5: semantiek versus div-soep
- Attributen voor formuliervalidatie