JavaScript lomake

JavaScript-lomakkeen vahvistus

HTML-lomakkeen vahvistus voidaan toteuttaa JavaScriptin avulla.

Jos lomakkeen kenttä (fname) on tyhjä, tämä funktio näyttää ilmoituksen ja palauttaa false, estäen lomakkeen lähettämisen:

JavaScript-esimerkki

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("Nimi on täytettävä");
    return false;
  }
}

Tämä funktio voidaan kutsua lomakkeen lähettäessä:

HTML-lomakkeen esimerkki

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Nimi: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Kokeile itse!

JavaScript voi vahvistaa numeron syötteen

JavaScriptia käytetään yleensä numeron syötteen vahvistamiseen:

Syötä numero 1-10 väliltä:

Kokeile itse!

Automaattinen HTML-lomakkeen vahvistus

HTML-lomakkeen vahvistus voidaan suorittaa selaimen toimesta automaattisesti:

Jos lomakkeen kenttä (fname) on tyhjä, niin required Ominaisuudet estävät tämän lomakkeen lähettämisen:

HTML-lomakkeen esimerkki

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required>
  <input type="submit" value="Submit">
</form>

Kokeile itse!

Vinkki:HTML-lomakkeen automaattinen vahvistus ei toimi Internet Explorer 9 tai aikaisemmissa versioissa.

Tietojen vahvistus

Tietojen vahvistus on prosessi, joka varmistaa, että käyttäjä syöttää puhtaita, oikeita ja hyödyllisiä tietoja.

Tyypillinen vahvistustehtävä on:

  • Onko käyttäjä täyttänyt kaikki pakolliset kentät?
  • Onko käyttäjä syöttänyt kelvollisen päivämäärän?
  • Onko käyttäjä syöttänyt tekstiä numerokenttään?

Useimmissa tapauksissa tietojen vahvistuksen tavoitteena on varmistaa, että käyttäjä syöttää oikeita tietoja.

Vahvistus voidaan määritellä monella eri tavalla ja toteuttaa monella eri tavalla.

Palvelinpuoleinen vahvistus suoritetaan Web-palvelimella, kun tiedot lähetetään palvelimelle.

Ennen kuin tiedot lähetetään Web-palvelimelle, asiakaslaite vahvistaa Web-selaimen toimesta.

HTML-rajoitettu vahvistus

HTML5 tukee uutta HTML-vahvistuskäsitettä, nimeltään rajoitettu vahvistus.

HTML-rajoitustarkistus perustuu:

  • Rajoitustarkistuksen HTML-input-ominaisuudet
  • Rajoitustarkistuksen CSS-pseudovalitsimet
  • Rajoitustarkistuksen DOM-ominaisuudet ja -menetelmät

Rajoitustarkistuksen HTML-input-ominaisuudet

Ominaisuudet Kuvaus
disabled Määritä input-elementin tulisi olla poissa käytöstä.
max Määritä input-elementin suurin arvo.
min Määritä input-elementin pienin arvo.
pattern Määritä input-elementin arvon malli.
required Määritä input-kentän pakollisuus.
type Määritä input-elementin tyyppi.

Täydellinen luettelo löytyy HTML-syötteen ominaisuudet.

Rajoitustarkistuksen CSS-pseudovalitsimet

Valitsin Kuvaus
:disabled Valitse input-elementti, jolla on määritelty "disabled"-ominaisuus.
:invalid Valitse input-elementti, jolla on kelvoton arvo.
:optional Valitse input-elementti, jolla ei ole määritelty "required"-ominaisuutta.
:required Valitse input-elementti, jolla on määritelty "required"-ominaisuus.
:valid Valitse input-elementti, jolla on kelvollinen arvo.

Täydellinen luettelo löytyy CSS-pseudolajit.