required pattern min max og maxlength
Tilføj indbyggede valideringsbegrænsninger til formularfelter
required pattern min max og maxlength er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Formularvalidering i HTML5
HTML5 tilføjede indbygget formularvalidering — ingen JavaScript er nødvendig:
- Browsere kontrollerer begrænsninger, før formularen sendes
- Indbyggede fejlmeddelelser vises automatisk
- Fungerer med CSS-pseudoklasserne
:valid/:invalid
required
Attributten required forhindrer afsendelse, hvis feltet er tomt:
<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
Attributten pattern validerer tekst i forhold til et regulært udtryk:
<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 -->Eksempler på almindelige pattern-værdier
Nyttige regulære udtryk til formularfelter:
<!-- 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 og max
Begræns input af tal, datoer og intervaller:
<!-- 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 og minlength
Styr længden på tekstinput:
<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
Attributten step definerer gyldige trin for input af tal og intervaller:
<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 og :invalid
Style felter ud fra deres valideringstilstand:
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 til brugerdefinerede fejlmeddelelser
Attributten title giver et tip i browserens valideringsfejl:
<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 -->Kombination af begrænsninger
Flere valideringsattributter fungerer sammen:
<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 og tidspunkt for validering
Validering udføres som standard ved afsendelse. Hvis du vil validere ved hver input-hændelse:
<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>Oversigt over valideringspseudoklasser
CSS-pseudoklasser til formularvalidering:
:valid— validering af begrænsninger bestået:invalid— én eller flere begrænsninger ikke bestået:required— har attributten required:optional— har ikke required:in-range— værdi inden for min/max:out-of-range— værdi uden for min/max
Hurtigt tjek
Hvilken attribut begrænser det maksimale antal tegn i et tekstinput?
Opsummering: Valideringsattributter
Det vigtigste om HTML5-validering:
required— feltet skal udfyldespattern— validerer i forhold til et regulært udtrykmin/max— værdiens grænser for tal, dato og intervalmaxlength/minlength— grænser for antal tegnstep— gyldige trin- CSS
:valid/:invalidtil styling
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
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “required pattern min max og maxlength” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “required pattern min max og maxlength”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “required pattern min max og maxlength”?
Tilføj indbyggede valideringsbegrænsninger til formularfelter Du øver dig i HTML 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å HTML Academy?
Der kræves ingen tidligere erfaring. HTML 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 1 af 4.
Hvor lang tid tager lektionen “required pattern min max og maxlength”?
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 HTML Academy-lektion?
Ja. Alle HTML 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
- required pattern min max og maxlength
- Attributten novalidate
- Grundlæggende om Constraint Validation API
- HTML5-validering kontra JavaScript-validering