reportValidity og setCustomValidity
Utløs nettleserens valideringsgrensesnitt og angi egendefinerte feilmeldinger
reportValidity og setCustomValidity er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.
To API-er for innebygd brukeropplevelse
Constraint Validation API-et eksponerer to metoder som styrer nettleserens innebygde valideringsgrensesnitt: reportValidity (viser verktøytipset) og setCustomValidity (angir en egendefinert feilmelding). Sammen lar de deg tilpasse meldingene samtidig som du beholder den innebygde visningen.
reportValidity kontra checkValidity
checkValidity() returnerer true eller false uten andre virkninger på brukergrensesnittet. reportValidity() gjør den samme kontrollen, men setter i tillegg fokus på det første ugyldige feltet og viser nettleserens valideringsverktøytips. Velg reportValidity når du vil ha en innebygd brukeropplevelse uten ekstra arbeid.
document.forms.signup.addEventListener("submit", (e) => {
if (!e.target.reportValidity()) {
e.preventDefault();
// browser already focused first invalid field and showed tooltip
}
});Programmatisk validering
For veivisere med flere trinn bør du validere feltene i hvert trinn før brukeren går videre: if (step.reportValidity()) { next(); }. Nettleseren håndterer visningen av feilen, og brukeren får fokus på feltet som trenger oppmerksomhet – slik slipper du å implementere fokushåndtering på nytt.
setCustomValidity overskriver meldinger
Standardmeldinger («Fyll ut dette feltet») passer kanskje ikke med tonen din. input.setCustomValidity("Username is required") erstatter standardmeldingen med teksten din. Inndatafeltet regnes som ugyldig til du tømmer meldingen.
Fjerne egendefinerte meldinger
input.setCustomValidity("") fjerner den egendefinerte meldingen og aktiverer vanlig validering igjen. Kall dette hver gang du validerer på nytt, ellers blir gamle egendefinerte meldinger stående selv etter at brukeren har løst problemet.
input.addEventListener("input", () => {
if (input.value.length < 3) {
input.setCustomValidity("Must be at least 3 characters");
} else {
input.setCustomValidity("");
}
});Asynkron validering
For kontroller på serversiden (om et brukernavn er unikt, eller en kupong er gyldig) bruker du setCustomValidity etter det asynkrone svaret: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. Nettleseren tar umiddelbart i bruk den nye gyldighetstilstanden.
Kombinere med egendefinert feilgrensesnitt
Hvis du vil bruke din egen feilvisning og samtidig beholde gyldighetssporingen, lytter du etter invalid-hendelsen og kaller e.preventDefault() for å undertrykke det innebygde verktøytipset: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).
Flere egendefinerte begrensninger
setCustomValidity støtter bare én egendefinert melding om gangen. Hvis du vil håndheve flere regler, kontrollerer du hver av dem og kaller setCustomValidity med den mest relevante meldingen i prioritert rekkefølge. Den første regelen som feiler, er den som vises.
Unngå overlapp med innebygd validering
Hvis du angir en egendefinert melding for et tomt obligatorisk felt, kan din melding og standardmeldingen komme i konflikt. Velg én tilnærming per felt: enten deaktiverer du den innebygde begrensningen (bruk type="text" i stedet for type="email" og valider med setCustomValidity), eller stoler du helt på den innebygde valideringen.
Egendefinert validering på skjemanivå
Ved validering på tvers av felt (for eksempel at bekreftelsen av passordet samsvarer), bruker du setCustomValidity på det relaterte feltet: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). Skjemaet er ugyldig til begge verdiene samsvarer.
Internasjonalisering
Innebygde meldinger oversettes av nettleseren basert på brukerens språk. Egendefinerte meldinger angitt med setCustomValidity må du selv skrive på riktig språk – les navigator.language eller bruk din egen i18n-tilstand, og angi den tilsvarende oversettelsen.
Testing
Åpne DevTools og prøv alle ugyldige forløp: innsending av et tomt skjema, delvis utfylte data, format som ikke samsvarer, og asynkrone feil. Kontroller at riktig melding vises, at den fjernes når problemet løses, og at innsending av et gyldig skjema fortsetter. Grensetilfeller (innliming av ugyldig format og nettleserens autofyll) bør testes særskilt.
Kunnskapssjekk
Etter at du har kalt input.setCustomValidity("Already taken"), hvordan forteller du nettleseren at feltet er gyldig igjen?
Oppsummering
reportValidity utløser nettleserens innebygde valideringsgrensesnitt (fokus og verktøytips), og er perfekt for programmatisk kontroll. setCustomValidity overskriver standardmeldinger med teksten din – tøm meldingen med en tom streng når feltet er gyldig igjen. Lytt etter invalid-hendelsen og bruk preventDefault for en helt egendefinert feilvisning. Dette kan brukes til validering på tvers av felt, asynkrone kontroller og lokaliserte egendefinerte meldinger.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «reportValidity og setCustomValidity» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «reportValidity og setCustomValidity», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «reportValidity og setCustomValidity»?
Utløs nettleserens valideringsgrensesnitt og angi egendefinerte feilmeldinger Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med HTML Academy?
Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «reportValidity og setCustomValidity»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?
Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- FormData API
- Constraint Validation API
- reportValidity og setCustomValidity
- Hendelser ved tilbakestilling av skjema og tilstandshåndtering