HTML Academy · Lektion

Grundlæggende om Constraint Validation API

Læs gyldighedstilstanden, og opret tilpassede meddelelser med Constraint Validation API

Lektion 3 af 413 trin

Grundlæggende om Constraint Validation API er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 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.

Hvad er Constraint Validation API?

Constraint Validation API er en JavaScript-grænseflade til at læse og angive formularens valideringstilstand:

Kontrollér, om et felt er gyldigt
Læs, hvilken bestemt begrænsning der mislykkedes
Angiv tilpassede fejlmeddelelser
Udløs browserens valideringsgrænseflade programmatisk

validity-egenskaben

Alle formularstyringer har et validity-objekt med bestemte booleske flag:

const input = document.getElementById('email');
const v = input.validity;

console.log(v.valid);         // true if all constraints pass
console.log(v.valueMissing);  // true if required but empty
console.log(v.typeMismatch);  // true if type doesn't match (e.g. bad email)
console.log(v.patternMismatch); // true if pattern fails
console.log(v.tooShort);      // true if shorter than minlength
console.log(v.tooLong);       // true if longer than maxlength
console.log(v.rangeUnderflow); // true if less than min
console.log(v.rangeOverflow);  // true if more than max

checkValidity-metoden

checkValidity() returnerer true/false og udløser invalid-hændelsen:

const form = document.getElementById('my-form');

// Check entire form:
if (!form.checkValidity()) {
  console.log('Form has errors');
}

// Check individual field:
const email = document.getElementById('email');
if (!email.checkValidity()) {
  console.log('Email is invalid');
}
// The 'invalid' event fires on invalid fields

reportValidity-metoden

reportValidity() viser browserens indbyggede valideringsgrænseflade:

const input = document.getElementById('username');

// Shows native browser error tooltip if invalid:
const valid = input.reportValidity();
console.log(valid);  // true or false

// On a form: validates all fields and shows first error:
document.getElementById('form').reportValidity();

validationMessage-egenskaben

validationMessage returnerer browserens fejlmeddelelse som en tekststreng:

const email = document.querySelector('input[type=email]');
email.value = 'not-an-email';

console.log(email.validationMessage);
// e.g. "Please include an '@' in the email address..."

console.log(email.validity.typeMismatch); // true

setCustomValidity

setCustomValidity(message) angiver en tilpasset valideringsfejl:

const username = document.getElementById('username');

// Check availability on blur:
username.addEventListener('blur', async () => {
  const res = await fetch(`/check-username?name=${username.value}`);
  const { taken } = await res.json();

  if (taken) {
    username.setCustomValidity('This username is already taken.');
  } else {
    username.setCustomValidity('');  // empty string = clear the error
  }
});

Rydning af tilpasset validering

Du skal rydde den tilpassede validering, når brugeren løser problemet:

const input = document.getElementById('username');

input.addEventListener('input', () => {
  // Clear custom error when user starts typing again:
  input.setCustomValidity('');
});

input.addEventListener('blur', async () => {
  // Re-validate on blur:
  const taken = await checkUsername(input.value);
  input.setCustomValidity(taken ? 'Username taken' : '');
});

invalid-hændelsen

invalid-hændelsen udløses på formularstyringer, der ikke består valideringen:

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', (e) => {
    e.preventDefault();  // prevent default browser tooltip
    // Show your custom error UI instead:
    showError(input, input.validationMessage);
  });
});

willValidate-egenskaben

willValidate er true, hvis elementet deltager i validering af begrænsninger:

document.querySelectorAll(':input').forEach(el => {
  if (el.willValidate) {
    console.log(el.name, 'will be validated');
  }
});
// Disabled, hidden, or output elements return willValidate = false

Brug af validity i tilpasset validering

Et komplet eksempel på tilpasset validering:

<form id="signup" novalidate>
  <input type="email" id="email" name="email" required>
  <span id="email-err" role="alert"></span>
  <button type="submit">Sign Up</button>
</form>

<script>
const form = document.getElementById('signup');
const email = document.getElementById('email');
const err = document.getElementById('email-err');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  err.textContent = '';

  if (email.validity.valueMissing) {
    err.textContent = 'Email is required.';
    email.focus();
    return;
  }
  if (email.validity.typeMismatch) {
    err.textContent = 'Enter a valid email address.';
    email.focus();
    return;
  }
  // Submit...
});
</script>

Oversigt over ValidityState-flag

Alle ValidityState-flag:

valueMissing — påkrævet, men tomt
typeMismatch — forkert format for typen
patternMismatch — mønsterets regex matcher ikke
tooShort / tooLong — minlength/maxlength
rangeUnderflow / rangeOverflow — min/max
stepMismatch — ikke en gyldig trinværdi
customError — en meddelelse fra setCustomValidity er angivet
badInput — browseren kan ikke fortolke værdien

Hurtigt tjek

Hvordan viser du programmatisk browserens indbyggede pop op-vindue med en valideringsfejl?

Besvar den i den interaktive lektion

Opsummering: Constraint Validation API

Det vigtigste om Constraint Validation API:

input.validity — ValidityState-objekt med bestemte flag
checkValidity() — returnerer true/false og udløser invalid-hændelsen
reportValidity() — kontrollerer og viser den indbyggede fejlgrænseflade
validationMessage — browserens fejltekst
setCustomValidity(msg) — angiver en tilpasset fejl; en tom tekststreng rydder den

Gratis at komme i gang

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

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Grundlæggende om Constraint Validation API” gratis?

Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Grundlæggende om Constraint Validation API”, 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 “Grundlæggende om Constraint Validation API”?

Læs gyldighedstilstanden, og opret tilpassede meddelelser med Constraint Validation API 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 3 af 4.

Hvor lang tid tager lektionen “Grundlæggende om Constraint Validation API”?

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

← Tilbage til HTML Academy