Lomakkeiden kelpoisuustarkistuksen attribuutit
Käytä required-, minlength-, maxlength-, pattern-, min-, max- ja step-attribuutteja ja tyylittele kelpoisuustiloja :valid- ja :invalid-pseudoluokilla.
Lomakkeiden kelpoisuustarkistuksen attribuutit on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Selaimen sisäinen validointi
HTML5 tarjoaa attribuuttien avulla lomakkeille sisäänrakennetun validoinnin. Kun lomake lähetetään, selain tarkistaa jokaisen kentän. Jos validointi epäonnistuu, selain näyttää oman virhevihjeensä ja estää lähetyksen — perustapauksissa JavaScriptiä ei tarvita.
required
Kun input-, select- tai textarea-elementtiin lisätään required, siitä tulee pakollinen. Selain näyttää virheen, jos kenttä on tyhjä lomaketta lähetettäessä.
<input type="text" name="name" required>
<select name="plan" required>
<option value="">Choose plan...</option>
<option value="free">Free</option>
</select>minlength ja maxlength
minlength määrittää merkkien vähimmäismäärän. maxlength estää enimmäismäärän ylittävän syötteen. Yhdistäkää ne salasanan monimutkaisuuden varmistamiseen tai kommenttien pituuden rajoittamiseen.
<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>min, max ja step numeerisille syötteille
min ja max määrittävät number- ja date-syötteiden sallitun vaihteluvälin. step määrittää askelen — siitä on hyötyä vaihteluväleissä, desimaalitarkkuudessa ja päivämääräkohtaisissa arvoissa.
<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">pattern — säännöllisiin lausekkeisiin perustuva validointi
pattern hyväksyy JavaScriptin säännöllisen lausekkeen. Syötteen täytyy vastata kuviota, jotta lomake voidaan lähettää. Lisätkää title, joka kuvaa odotettua muotoa selaimen virhevihjeessä.
<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
title="Enter a valid UK postcode (e.g. SW1A 1AA)">
<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">novalidate — selaimen oman validoinnin poistaminen
Lisätkää novalidate <form>-elementtiin poistaaksenne kaiken selaimen oman validoinnin käytöstä. Tehkää näin, kun toteutatte mukautetun JavaScript-validoinnin, jotta käyttäjä saa yhdenmukaisen käyttökokemuksen.
<form novalidate id="signup">
<!-- custom validation in JS -->
</form>Kelvollisuuden tarkistaminen JavaScriptissä
Constraint Validation API:n avulla kelvollisuuden voi tarkistaa ohjelmallisesti: input.validity (ValidityState-objekti), input.checkValidity() (palauttaa totuusarvon), input.setCustomValidity(message) (asettaa mukautetun virheen).
const email = document.querySelector('#email');
if (!email.checkValidity()) {
console.log(email.validationMessage); // browser's error text
console.log(email.validity.valueMissing); // true if empty
console.log(email.validity.typeMismatch); // true if not email format
}setCustomValidity
Kutsukaa setCustomValidity(message)-metodia ei-tyhjällä merkkijonolla merkitäksenne syötekentän virheelliseksi mukautetulla viestillä. Kutsukaa sitä tyhjällä merkkijonolla virheen poistamiseksi. Tämä on hyödyllistä palvelimella validoitavissa kentissä, kuten käyttäjänimen ainutlaatuisuuden tarkistamisessa.
const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
username.setCustomValidity('This username is already taken.');
} else {
username.setCustomValidity(''); // valid
}:valid- ja :invalid-pseudoluokat
Muotoilkaa kelvolliset ja virheelliset syötekentät CSS-pseudoluokkien avulla. Huomioikaa, että syötekentät ovat :invalid-tilassa ennen käyttäjän toimia. Käyttäkää :user-invalid-pseudoluokkaa (nykyaikaiset selaimet) tai JavaScriptiä 'touched'-luokan lisäämiseen vasta ensin.
/* Modern approach */
input:user-invalid {
border-color: #e53e3e;
}
input:user-valid {
border-color: #38a169;
}
/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }Mukautetut virheilmoitukset reportValidity-metodilla
form.reportValidity() käynnistää selaimen natiivin validointikäyttöliittymän kaikissa kentissä. Käyttäkää sitä mukautettujen validointiviestien asettamisen jälkeen, jotta voitte näyttää ne käyttäjälle odottamatta submit-tapahtumaa.
Saavutettava virheiden näyttötapa
Näyttäkää virheet kentän yhteydessä seuraavasti: 1) lisätkää syötekenttään aria-invalid="true", 2) näyttäkää näkyvä virhekappale, joka on yhdistetty kenttään aria-describedby-attribuutilla, 3) siirtäkää kohdistus ensimmäiseen virheelliseen kenttään. Tämä palvelee kaikkia käyttäjiä, myös ruudunlukijoiden käyttäjiä.
Pikatarkistus
Mikä attribuutti rajoittaa tekstikentän enintään 280 merkkiin?
Kertaus: lomakkeiden validointiattribuutit
required, minlength/maxlength, min/max/step, pattern — kaikki tarjoavat selaimen natiivin validoinnin ilman lisätyötä. Käyttäkää novalidate-attribuuttia, kun toteutatte oman JavaScript-validoinnin. Constraint Validation API antaa JavaScriptille pääsyn kelvollisuustilaan. Muotoilkaa virheet :user-invalid-pseudoluokalla sen jälkeen, kun käyttäjä on käsitellyt kenttää.
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
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Lomakkeiden kelpoisuustarkistuksen attribuutit” ilmainen?
Kyllä – oppitunnin ”Lomakkeiden kelpoisuustarkistuksen attribuutit” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Lomakkeiden kelpoisuustarkistuksen attribuutit”?
Käytä required-, minlength-, maxlength-, pattern-, min-, max- ja step-attribuutteja ja tyylittele kelpoisuustiloja :valid- ja :invalid-pseudoluokilla. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Lomakkeiden kelpoisuustarkistuksen attribuutit”-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ä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend 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
- Lomakeohjaimet: input-tyypit, select ja textarea
- ARIA ja saavutettavuus: label, role ja aria-*
- Semanttinen HTML5: semantiikka ja div-kaaos
- Lomakkeiden kelpoisuustarkistuksen attribuutit