reportValidity och setCustomValidity
Utlös webbläsarens valideringsgränssnitt och ange anpassade felmeddelanden
reportValidity och setCustomValidity ä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.
Två API:er för inbyggd användarupplevelse
Constraint Validation API exponerar två metoder som styr webbläsarens inbyggda valideringsgränssnitt: reportValidity (visa verktygstipset) och setCustomValidity (ange ett anpassat felmeddelande). Tillsammans gör de det möjligt att anpassa meddelanden samtidigt som den inbyggda presentationen behålls.
reportValidity jämfört med checkValidity
checkValidity() returnerar tyst true/false – utan bieffekter i gränssnittet. reportValidity() gör samma kontroll men fokuserar dessutom på det första ogiltiga fältet och visar webbläsarens valideringsverktygstips. Välj reportValidity när den inbyggda användarupplevelsen räcker.
document.forms.signup.addEventListener("submit", (e) => {
if (!e.target.reportValidity()) {
e.preventDefault();
// browser already focused first invalid field and showed tooltip
}
});Programmatisk validering
För flerstegsguider ska fälten i varje steg valideras innan nästa steg visas: if (step.reportValidity()) { next(); }. Webbläsaren hanterar felvisningen och fokuserar på fältet som behöver åtgärdas, så att egen hantering av fokus inte behöver implementeras.
setCustomValidity åsidosätter meddelanden
Standardmeddelanden ("Please fill out this field") kanske inte passar önskad ton. input.setCustomValidity("Username is required") ersätter standardmeddelandet med den angivna texten. Inmatningsfältet behandlas som ogiltigt tills meddelandet rensas.
Rensa anpassade meddelanden
input.setCustomValidity("") tar bort det anpassade meddelandet och aktiverar normal validering igen. Anropa detta varje gång fältet valideras på nytt, annars ligger gamla anpassade meddelanden kvar även efter att användaren har åtgärdat problemet.
input.addEventListener("input", () => {
if (input.value.length < 3) {
input.setCustomValidity("Must be at least 3 characters");
} else {
input.setCustomValidity("");
}
});Asynkron validering
För kontroller på serversidan (om användarnamnet är unikt eller om en kupong är giltig) används setCustomValidity efter det asynkrona svaret: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. Webbläsaren registrerar det nya giltighetstillståndet omedelbart.
Kombinera med ett anpassat felgränssnitt
Om den egna felvisningen ska användas samtidigt som giltighetstillståndet fortfarande hanteras, lyssna på invalid-händelsen och anropa e.preventDefault() för att undertrycka det inbyggda verktygstipset: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).
Flera anpassade begränsningar
setCustomValidity stöder endast ett anpassat meddelande åt gången. Om flera regler ska tillämpas kontrolleras varje regel och setCustomValidity anropas med det mest relevanta meddelandet enligt prioritetsordning. Det första felande villkoret är det som visas.
Överlappa inte med inbyggd validering
Om ett anpassat meddelande anges för ett tomt obligatoriskt fält kan det krocka med standardmeddelandet. Välj en metod per fält: inaktivera antingen den inbyggda begränsningen (använd type="text" i stället för type="email" och validera via setCustomValidity), eller förlita er helt på den inbyggda valideringen.
Anpassad validering på formulärnivå
Vid validering mellan fält (till exempel när en lösenordsbekräftelse ska matcha lösenordet) tillämpas setCustomValidity på det relaterade fältet: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). Formuläret är ogiltigt tills båda värdena matchar.
Internationalisering
Inbyggda meddelanden lokaliseras av webbläsaren utifrån användarens språk. Anpassade meddelanden som anges via setCustomValidity måste själv tillhandahållas på rätt språk – läs navigator.language eller använd programmets eget i18n-tillstånd och ange motsvarande översättning.
Testning
Öppna DevTools och prova alla ogiltiga scenarier: inskickning av tomt formulär, ofullständig inmatning, felaktigt format och asynkront fel. Kontrollera att rätt meddelande visas, att det försvinner när problemet åtgärdas och att ett giltigt formulär kan skickas. Gränsfall, som inklistring av ett ogiltigt format och webbläsarens autofyllning, bör testas särskilt.
Kunskapskontroll
Hur meddelar man webbläsaren att inmatningsfältet är giltigt igen efter att input.setCustomValidity("Already taken") har anropats?
Sammanfattning
reportValidity utlöser webbläsarens inbyggda valideringsgränssnitt (fokus och verktygstips) och passar därför utmärkt för programmatiska kontroller. setCustomValidity ersätter standardmeddelanden med egen text – rensa med en tom sträng när fältet är giltigt igen. Lyssna på invalid-händelsen och använd preventDefault för helt anpassade felvisningar. Använd detta för validering mellan fält, asynkrona kontroller och lokaliserade anpassade meddelanden.
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
Vanliga frågor
Är lektionen ”reportValidity och setCustomValidity” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”reportValidity och setCustomValidity”, 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 ”reportValidity och setCustomValidity”?
Utlös webbläsarens valideringsgränssnitt och ange anpassade felmeddelanden 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 ”reportValidity och setCustomValidity”?
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
- FormData API
- Constraint Validation API
- reportValidity och setCustomValidity
- Händelser vid formuläråterställning och tillståndshantering