Attributter til formularvalidering
Anvend attributterne required, minlength, maxlength, pattern, min, max og step, og style valideringstilstande med pseudo-klasserne :valid og :invalid.
Attributter til formularvalidering er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Indbygget browservalidering
HTML5 indeholder indbygget formularvalidering via attributter. Når en formular indsendes, validerer browseren hvert felt. Hvis valideringen mislykkes, viser den et indbygget fejlværktip og forhindrer indsendelse — der kræves ingen JavaScript til grundlæggende tilfælde.
required
Hvis du føjer required til et felt, en select eller en textarea, bliver det obligatorisk. Browseren viser en fejl, hvis feltet er tomt, når formularen indsendes.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength og maxlength
minlength håndhæver et minimumsantal tegn. maxlength forhindrer indtastning ud over et maksimum. Kombinér dem for at håndhæve adgangskoders kompleksitet eller begrænse længden af kommentarer.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max og step til numeriske felter
min og max angiver det gyldige interval for tal- og datofelter. step angiver trinnet — nyttigt til intervaller (5 %, decimalpræcision, kun dato).
<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 — Validering med regulære udtryk
pattern accepterer et regulært JavaScript-udtryk. Feltet skal matche mønsteret, før formularen kan indsendes. Medtag en title for at beskrive det forventede format i browserens fejlværktip.
<!-- 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 — Deaktivering af indbygget validering
Føj novalidate til elementet <form> for at deaktivere al indbygget browservalidering. Gør det, når du implementerer tilpasset JavaScript-validering, så brugeren får en ensartet oplevelse.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Kontrol af gyldighed i JavaScript
Constraint Validation API giver dig mulighed for at kontrollere gyldighed programmatisk: input.validity (ValidityState-objekt), input.checkValidity() (returnerer boolean) og input.setCustomValidity(message) (angiver en brugerdefineret fejl).
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
Kald setCustomValidity(message) med en streng, der ikke er tom, for at markere et inputfelt som ugyldigt med en brugerdefineret meddelelse. Kald den med en tom streng for at rydde fejlen. Det er nyttigt til felter, der valideres på serveren, f.eks. kontrol af, om et brugernavn er unikt.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}Pseudoklasserne :valid og :invalid
Formatér gyldige og ugyldige inputfelter med CSS-pseudoklasser. Vær forsigtig: Inputfelter er :invalid, før brugeren interagerer med dem. Brug :user-invalid (i moderne browsere), eller brug JavaScript til først at tilføje klassen 'touched'.
/* 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; }Brugerdefinerede fejlmeddelelser med reportValidity
form.reportValidity() viser browserens indbyggede valideringsgrænseflade for alle felter. Brug den efter at have angivet brugerdefinerede valideringsmeddelelser for at vise dem til brugeren uden at vente på en submit-hændelse.
Mønster til tilgængelig visning af fejl
Vis fejlmeddelelser direkte i formularen sådan: 1) aria-invalid="true" på inputfeltet, 2) et synligt fejlafsnit, der er knyttet til inputfeltet med aria-describedby, 3) flyt fokus til det første ugyldige felt. Det fungerer for alle brugere, herunder brugere af skærmlæsere.
Hurtigt tjek
Hvilken attribut begrænser et tekstinput til højst 280 tegn?
Opsummering: Attributter til formularvalidering
required, minlength/maxlength, min/max/step og pattern giver alle indbygget browservalidering uden ekstra arbejde. Brug novalidate, når du implementerer brugerdefineret validering med JavaScript. Constraint Validation API giver JavaScript adgang til valideringsstatus. Formatér fejl med :user-invalid, efter at brugeren har interageret med feltet.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Attributter til formularvalidering” gratis?
Ja — hele teksten til “Attributter til formularvalidering” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Attributter til formularvalidering”?
Anvend attributterne required, minlength, maxlength, pattern, min, max og step, og style valideringstilstande med pseudo-klasserne :valid og :invalid. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Attributter til formularvalidering”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Formularkontroller: inputtyper, select og textarea
- ARIA og tilgængelighed: label, role og aria-*
- Semantisk HTML5: semantik kontra div-suppe
- Attributter til formularvalidering