reportValidity ja setCustomValidity
Käynnistä selaimen tarkistuskäyttöliittymä ja määritä mukautettuja virheviestejä
reportValidity ja setCustomValidity on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Kaksi API:a sisäänrakennettua käyttökokemusta varten
Constraint Validation API tarjoaa kaksi metodia, jotka ohjaavat selaimen sisäänrakennettua validointikäyttöliittymää: reportValidity näyttää työkaluvihjeen ja setCustomValidity antaa mukautetun virheilmoituksen. Yhdessä ne mahdollistavat viestien mukauttamisen säilyttäen samalla selaimen natiivin esitystavan.
reportValidity vs checkValidity
checkValidity() palauttaa hiljaisesti arvon true tai false ilman käyttöliittymään kohdistuvia sivuvaikutuksia. reportValidity() tekee saman tarkistuksen, mutta kohdistaa lisäksi fokuksen ensimmäiseen virheelliseen kenttään ja näyttää selaimen validointityökaluvihjeen. Valitse reportValidity, kun haluat natiivin käyttökokemuksen ilman omaa toteutusta.
document.forms.signup.addEventListener("submit", (e) => {
if (!e.target.reportValidity()) {
e.preventDefault();
// browser already focused first invalid field and showed tooltip
}
});Ohjelmallinen validointi
Monivaiheisissa näkymissä validoi kunkin vaiheen kentät ennen etenemistä: if (step.reportValidity()) { next(); }. Selain huolehtii virheiden näyttämisestä ja kohdistaa käyttäjän siihen kenttään, joka vaatii huomiota, joten sinun ei tarvitse toteuttaa fokuksen hallintaa uudelleen.
setCustomValidity ohittaa viestit
Oletusviestit ("Täytä tämä kenttä") eivät välttämättä vastaa haluttua sävyä. input.setCustomValidity("Username is required") korvaa oletusviestin omalla tekstilläsi. Syötettä käsitellään virheellisenä, kunnes viesti tyhjennetään.
Mukautettujen viestien tyhjentäminen
input.setCustomValidity("") poistaa mukautetun viestin ja ottaa normaalin validoinnin uudelleen käyttöön. Kutsu tätä aina, kun validoit uudelleen, sillä muuten vanhentunut mukautettu viesti säilyy senkin jälkeen, kun käyttäjä on korjannut ongelman.
input.addEventListener("input", () => {
if (input.value.length < 3) {
input.setCustomValidity("Must be at least 3 characters");
} else {
input.setCustomValidity("");
}
});Asynkroninen validointi
Palvelinpuolen tarkistuksissa, kuten käyttäjänimen ainutlaatuisuuden tai kupongin kelvollisuuden tarkistamisessa, käytä setCustomValidity-metodia asynkronisen vastauksen jälkeen: const ok = await checkUsername(value); input.setCustomValidity(ok ? "" : "Already taken");. Selain havaitsee uuden validointitilan heti.
Yhdistäminen mukautettuun virhekäyttöliittymään
Jos haluat käyttää omaa virheiden näyttötapaa mutta säilyttää validoinnin seurannan, kuuntele invalid-tapahtumaa ja kutsu e.preventDefault() estääksesi natiivin työkaluvihjeen: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input, input.validationMessage); }).
Useita mukautettuja rajoitteita
setCustomValidity tukee vain yhtä mukautettua viestiä kerrallaan. Jos haluat valvoa useita sääntöjä, tarkista jokainen niistä ja kutsu setCustomValidity-metodia tärkeimmällä viestillä prioriteettijärjestyksessä. Ensimmäisenä epäonnistuvan säännön viesti näytetään.
Älä käytä päällekkäin sisäänrakennetun validoinnin kanssa
Jos asetat mukautetun viestin tyhjälle pakolliselle kentälle, oma viestisi ja oletusviesti voivat olla ristiriidassa. Valitse kenttää kohti yksi lähestymistapa: poista sisäänrakennettu rajoite käytöstä käyttämällä type="text"-tyyppiä type="email"-tyypin sijaan ja validoi setCustomValidity-metodilla, tai luota kokonaan sisäänrakennettuun validointiin.
Lomaketason mukautettu validointi
Monen kentän välisessä validoinnissa, kuten salasanojen täsmäämisen tarkistamisessa, käytä setCustomValidity-metodia liittyvässä kentässä: confirmInput.setCustomValidity(confirmInput.value === passInput.value ? "" : "Passwords do not match"). Lomake on virheellinen, kunnes molemmat arvot täsmäävät.
Kansainvälistäminen
Selain lokalisoi sisäänrakennetut viestit käyttäjän kielen perusteella. setCustomValidity-metodilla asetetut mukautetut viestit on käännettävä itse oikealle kielelle. Lue navigator.language tai oma i18n-tilasi ja anna sitä vastaava käännös.
Testaus
Avaa DevTools ja kokeile jokaista virhetilannetta: lähetys tyhjänä, osittainen syöte, väärä muoto ja asynkronisen tarkistuksen epäonnistuminen. Varmista, että oikea viesti näytetään, että ongelman korjaaminen poistaa viestin ja että kelvollisen lomakkeen lähetys onnistuu. Myös reunatapaukset, kuten virheellisessä muodossa olevan arvon liittäminen ja selaimen automaattinen täyttö, kannattaa testata erikseen.
Tietotesti
Kun olet kutsunut input.setCustomValidity("Already taken"), miten ilmoitat selaimelle, että syöte on jälleen kelvollinen?
Yhteenveto
reportValidity käynnistää selaimen sisäänrakennetun validointikäyttöliittymän (fokus ja työkaluvihje), joten se sopii ohjelmallisiin tarkistuksiin. setCustomValidity korvaa oletusviestit omalla tekstilläsi. Tyhjennä viesti tyhjällä merkkijonolla, kun syöte on jälleen kelvollinen. Kuuntele invalid-tapahtumaa ja käytä preventDefault-metodia, jos haluat näyttää virheet kokonaan itse. Näitä ominaisuuksia voi käyttää monen kentän väliseen validointiin, asynkronisiin tarkistuksiin ja lokalisoituihin mukautettuihin viesteihin.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”reportValidity ja setCustomValidity” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “reportValidity ja setCustomValidity”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”reportValidity ja setCustomValidity”?
Käynnistä selaimen tarkistuskäyttöliittymä ja määritä mukautettuja virheviestejä Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”reportValidity ja setCustomValidity”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- FormData API
- Constraint Validation API
- reportValidity ja setCustomValidity
- Lomakkeen nollaustapahtumat ja tilanhallinta