HTML Academy · Oppitunti

required, pattern, min, max ja maxlength

Lisää lomakkeen syöttökenttiin sisäänrakennetut tarkistusrajoitteet

Oppitunti 1/414 vaihetta

required, pattern, min, max ja maxlength on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

HTML5-lomakkeen validointi

HTML5 toi lomakkeisiin sisäänrakennetun validoinnin — JavaScriptiä ei tarvita:

Selaimet tarkistavat rajoitteet ennen lähettämistä
Natiiviset virheilmoitukset näytetään automaattisesti
Toimii CSS:n :valid- ja :invalid-pseudoluokkien kanssa

required

required-attribuutti estää lähettämisen, jos kenttä on tyhjä:

<label for="email">Email (required)</label>
<input type="email" id="email" name="email" required>
<!-- Empty on submit → browser shows "Please fill in this field" -->
<!-- Also: field is :invalid until filled -->

pattern

pattern-attribuutti validoi tekstin säännöllisen lausekkeen perusteella:

<label for="username">Username (letters and numbers only)</label>
<input
  type="text"
  id="username"
  name="username"
  pattern="[a-zA-Z0-9]{3,20}"
  title="3-20 letters and numbers"
>
<!-- pattern anchored at both ends automatically -->
<!-- title provides the error message hint -->

Yleisiä pattern-esimerkkejä

Lomakekentissä hyödyllisiä säännöllisiä lausekkeita:

<!-- Phone: digits, spaces, hyphens -->
<input type="tel" pattern="[0-9 ()+-]{7,20}">

<!-- Postal code: US zip code -->
<input type="text" pattern="[0-9]{5}(-[0-9]{4})?">

<!-- Password: min 8 chars, one uppercase, one digit -->
<input type="password" pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}">

<!-- Twitter handle: -->
<input type="text" pattern="@?[A-Za-z0-9_]{1,15}">

min ja max

Rajoittakaa numero-, päivämäärä- ja range-syötteiden arvoja:

<!-- Number range -->
<input type="number" name="qty" min="1" max="100">

<!-- Date range -->
<input type="date" name="checkin" min="2025-01-01" max="2025-12-31">

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5">

<!-- Time -->
<input type="time" name="meeting" min="09:00" max="17:00">

maxlength ja minlength

Hallitkaa tekstisyötteen pituutta:

<input type="text" name="username" minlength="3" maxlength="20">
<!-- minlength: minimum number of characters required -->
<!-- maxlength: maximum characters allowed (browser enforces hard stop) -->

<textarea name="bio" minlength="50" maxlength="500"></textarea>
<!-- Same attributes work on textarea -->

step

step-attribuutti määrittää kelvolliset askelvälit number- ja range-syötteille:

<input type="number" name="price" min="0" step="0.01">
<!-- Accepts decimal prices: 0.00, 0.01, 4.99, etc. -->

<input type="number" name="qty" min="0" step="5">
<!-- Only multiples of 5: 0, 5, 10, 15... -->

<input type="range" min="0" max="100" step="10">
<!-- Snaps to: 0, 10, 20, ..., 100 -->

CSS:n :valid ja :invalid

Tyylitelkää kentät niiden validointitilan perusteella:

input:valid {
  border-color: #22c55e;   /* green when valid */
}

input:invalid {
  border-color: #ef4444;   /* red when invalid */
}

/* Avoid showing :invalid on page load (before user interaction): */
input:not(:placeholder-shown):invalid {
  border-color: #ef4444;
}
/* Only show invalid style after user has typed something */

title mukautettuja virheilmoituksia varten

title-attribuutti antaa vihjeen selaimen validointivirheeseen:

<input
  type="text"
  pattern="[A-Za-z]{2,3}"
  title="Enter a 2 or 3 letter country code (e.g. US, GB, DEU)"
  name="country-code"
>
<!-- Browser shows the title text alongside the default error message -->

Rajoitteiden yhdistäminen

Useat validointiattribuutit toimivat yhdessä:

<input
  type="text"
  name="username"
  required
  minlength="3"
  maxlength="20"
  pattern="[a-z][a-z0-9_]*"
  title="Lowercase letters, numbers, underscores. Must start with a letter."
>
<!-- All constraints must pass for the field to be :valid -->

novalidate ja validoinnin ajoitus

Validointi suoritetaan oletusarvoisesti lähetettäessä. Jos haluatte validoida jokaisella input-tapahtumalla:

<input type="email" id="email">

<script>
const input = document.getElementById('email');
input.addEventListener('blur', () => {
  // Check validity on blur (when user leaves field):
  if (!input.validity.valid) {
    input.reportValidity();
  }
});
</script>

Validoinnin pseudoluokkien yhteenveto

Lomakkeen validoinnin CSS-pseudoluokat:

:valid — rajoitevalidointi läpäisty
:invalid — vähintään yksi rajoite ei täyty
:required — sisältää required-attribuutin
:optional — ei sisällä required-attribuuttia
:in-range — arvo on min- ja max-arvojen välillä
:out-of-range — arvo on min- ja max-arvojen ulkopuolella

Pikatarkistus

Mikä attribuutti rajoittaa tekstisyötteen merkkien enimmäismäärää?

Vastaa interaktiivisessa oppitunnissa

Kertaus: validointiattribuutit

HTML5-validoinnin perusteet:

required — kenttä on täytettävä
pattern — validoi säännöllisen lausekkeen perusteella
min / max — numero-, päivämäärä- ja range-arvojen rajat
maxlength / minlength — merkkimäärän rajat
step — kelvolliset askelvälit
CSS:n :valid / :invalid tyylittelyä varten

Aloita maksutta

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

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”required, pattern, min, max ja maxlength” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “required, pattern, min, max ja maxlength”. 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 ”required, pattern, min, max ja maxlength”?

Lisää lomakkeen syöttökenttiin sisäänrakennetut tarkistusrajoitteet 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 1/4.

Kuinka kauan ”required, pattern, min, max ja maxlength”-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

required, pattern, min, max ja maxlength
novalidate-attribuutti
Constraint Validation API:n perusteet
HTML5- ja JavaScript-tarkistuksen kompromissit

← Takaisin: HTML Academy