required pattern min max en maxlength
Voeg ingebouwde validatiebeperkingen toe aan formulierinvoer
required pattern min max en maxlength is een gratis HTML Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject HTML Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus HTML Academy bevat in totaal 4 lessen.
HTML5-formuliervalidatie
HTML5 heeft ingebouwde formuliervalidatie toegevoegd — JavaScript is niet nodig:
- Browsers controleren beperkingen voordat ze het formulier verzenden
- Ingebouwde foutmeldingen verschijnen automatisch
- Werkt met de CSS-pseudoklassen
:valid/:invalid
required
Het attribuut required voorkomt verzending als het veld leeg is:
<label for="email">Email (required)</label>
<input type="email" id="email" name="email" required>
<!-- Empty on submit → browser shows "Please fill in this field" -->
<!-- Also: field is :invalid until filled -->pattern
Het attribuut pattern valideert tekst aan de hand van een reguliere expressie:
<label for="username">Username (letters and numbers only)</label>
<input
type="text"
id="username"
name="username"
pattern="[a-zA-Z0-9]{3,20}"
title="3-20 letters and numbers"
>
<!-- pattern anchored at both ends automatically -->
<!-- title provides the error message hint -->Voorbeelden van veelgebruikte patronen
Handige patronen voor reguliere expressies in formuliervelden:
<!-- Phone: digits, spaces, hyphens -->
<input type="tel" pattern="[0-9 ()+-]{7,20}">
<!-- Postal code: US zip code -->
<input type="text" pattern="[0-9]{5}(-[0-9]{4})?">
<!-- Password: min 8 chars, one uppercase, one digit -->
<input type="password" pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}">
<!-- Twitter handle: -->
<input type="text" pattern="@?[A-Za-z0-9_]{1,15}">min en max
Beperk invoer voor getallen, datums en bereiken:
<!-- Number range -->
<input type="number" name="qty" min="1" max="100">
<!-- Date range -->
<input type="date" name="checkin" min="2025-01-01" max="2025-12-31">
<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5">
<!-- Time -->
<input type="time" name="meeting" min="09:00" max="17:00">maxlength en minlength
Bepaal de lengte van tekstinvoer:
<input type="text" name="username" minlength="3" maxlength="20">
<!-- minlength: minimum number of characters required -->
<!-- maxlength: maximum characters allowed (browser enforces hard stop) -->
<textarea name="bio" minlength="50" maxlength="500"></textarea>
<!-- Same attributes work on textarea -->step
Het attribuut step bepaalt geldige stappen voor invoer van getallen en bereiken:
<input type="number" name="price" min="0" step="0.01">
<!-- Accepts decimal prices: 0.00, 0.01, 4.99, etc. -->
<input type="number" name="qty" min="0" step="5">
<!-- Only multiples of 5: 0, 5, 10, 15... -->
<input type="range" min="0" max="100" step="10">
<!-- Snaps to: 0, 10, 20, ..., 100 -->CSS :valid en :invalid
Maak velden op basis van hun validatiestatus op:
input:valid {
border-color: #22c55e; /* green when valid */
}
input:invalid {
border-color: #ef4444; /* red when invalid */
}
/* Avoid showing :invalid on page load (before user interaction): */
input:not(:placeholder-shown):invalid {
border-color: #ef4444;
}
/* Only show invalid style after user has typed something */title voor aangepaste foutmeldingen
Het attribuut title geeft een hint in de validatiefout van de browser:
<input
type="text"
pattern="[A-Za-z]{2,3}"
title="Enter a 2 or 3 letter country code (e.g. US, GB, DEU)"
name="country-code"
>
<!-- Browser shows the title text alongside the default error message -->Beperkingen combineren
Meerdere validatieattributen werken samen:
<input
type="text"
name="username"
required
minlength="3"
maxlength="20"
pattern="[a-z][a-z0-9_]*"
title="Lowercase letters, numbers, underscores. Must start with a letter."
>
<!-- All constraints must pass for the field to be :valid -->novalidate en het moment van valideren
Validatie wordt standaard uitgevoerd bij het verzenden. Valideer bij elke input-gebeurtenis:
<input type="email" id="email">
<script>
const input = document.getElementById('email');
input.addEventListener('blur', () => {
// Check validity on blur (when user leaves field):
if (!input.validity.valid) {
input.reportValidity();
}
});
</script>Samenvatting van validatiepseudoklassen
CSS-pseudoklassen voor formuliervalidatie:
:valid— validatie van beperkingen geslaagd:invalid— een of meer beperkingen niet gehaald:required— heeft het attribuut required:optional— heeft required niet:in-range— waarde binnen min/max:out-of-range— waarde buiten min/max
Korte controle
Welk attribuut beperkt het maximale aantal tekens in een tekstinvoer?
Samenvatting: validatieattributen
De belangrijkste punten over HTML5-validatie:
required— het veld moet worden ingevuldpattern— valideren aan de hand van een reguliere expressiemin/max— waardebereik voor getallen, datums en bereikenmaxlength/minlength— grenzen voor het aantal tekensstep— geldige stappen- CSS
:valid/:invalidvoor de opmaak
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
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “required pattern min max en maxlength” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad HTML Academy, waaronder “required pattern min max en maxlength”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus HTML Academy bevat in totaal 4 lessen.
Wat leer ik in “required pattern min max en maxlength”?
Voeg ingebouwde validatiebeperkingen toe aan formulierinvoer Je oefent met HTML 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 HTML Academy te beginnen?
Ervaring vooraf is niet nodig. HTML 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 1 van 4.
Hoe lang duurt de les “required pattern min max en maxlength”?
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 HTML Academy?
Ja. Elke les over HTML 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
- required pattern min max en maxlength
- Het attribuut novalidate
- Basisprincipes van de Constraint Validation API
- Afwegingen tussen HTML5- en JavaScript-validatie