HTML Academy · Lektion

Grunderna i Constraint Validation API

Läs giltighetsstatus och anpassade meddelanden med Constraint Validation API

Lektion 3 av 413 steg

Grunderna i Constraint Validation API är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad är Constraint Validation API?

Constraint Validation API är ett JavaScript-gränssnitt för att läsa av och ange valideringstillståndet för formulär:

Kontrollera om ett fält är giltigt
Läs vilken specifik begränsning som inte uppfylldes
Ange anpassade felmeddelanden
Utlös webbläsarens valideringsgränssnitt programmatiskt

Egenskapen validity

Varje formulärkontroll har ett validity-objekt med specifika booleska flaggor:

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

Metoden checkValidity

checkValidity() returnerar true/false och utlöser händelsen invalid:

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

Metoden reportValidity

reportValidity() visar webbläsarens inbyggda valideringsgränssnitt:

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();

Egenskapen validationMessage

validationMessage returnerar webbläsarens felmeddelande som en sträng:

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) anger ett anpassat valideringsfel:

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
  }
});

Rensa anpassad giltighet

Den anpassade giltigheten måste rensas när användaren har åtgärdat 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' : '');
});

Händelsen invalid

Händelsen invalid utlöses för formulärkontroller som inte klarar 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);
  });
});

Egenskapen will-validate

willValidate är true om elementet deltar i constraint-validering:

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

Använda validity i anpassad validering

Ett komplett exempel på anpassad 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>

Sammanfattning av ValidityState-flaggor

Alla ValidityState-flaggor:

valueMissing — obligatoriskt men tomt
typeMismatch — felaktigt typformat
patternMismatch — mönstrets reguljära uttryck matchar inte
tooShort / tooLong — minlength/maxlength
rangeUnderflow / rangeOverflow — min/max
stepMismatch — inte ett giltigt steg
customError — ett meddelande från setCustomValidity har angetts
badInput — webbläsaren kan inte tolka värdet

Snabbkontroll

Hur visar Ni programmatiskt webbläsarens inbyggda popup med valideringsfel?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Constraint Validation API

Det viktigaste om Constraint Validation API:

input.validity — ValidityState-objekt med specifika flaggor
checkValidity() — returnerar true/false och utlöser händelsen invalid
reportValidity() — kontrollerar och visar det inbyggda felgränssnittet
validationMessage — webbläsarens felmeddelande
setCustomValidity(msg) — anger ett anpassat fel; en tom sträng rensar det

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Grunderna i Constraint Validation API” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”Grunderna i Constraint Validation API”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Grunderna i Constraint Validation API”?

Läs giltighetsstatus och anpassade meddelanden med Constraint Validation API Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig HTML Academy?

Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Grunderna i Constraint Validation API”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här HTML Academy-lektionen?

Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

required pattern min max och maxlength
Attributet novalidate
Grunderna i Constraint Validation API
Avvägningar mellan HTML5- och JavaScript-validering

← Tillbaka till HTML Academy