Lomakkeet ja validointi

Toteutetaan lomakesivu ja yhdistetään lomakkeeseen sopivat tarkistukset. Käytä apunasi seuraavia materiaaleja:

Keskeneräinen malli

Lomakekentät

Toteuta mallikuvan näköinen lomakesivu käyttäen järkeviä lomakekenttien tyyppejä. Valmiit tekstit löydät tekstit.txt-tiedostosta.

Mallikuva lomakkeesta

Varmista erityisesti seuraavat asiat:

Rajoitukset

Varmista, että lomakkeessa toimivat seuraavat rajoitukset ilman javascriptia. Regexpejä voit harjoitella ja debugata regex101-palvelussa.

Kokeile asettaa form-elementin novalidate-ominaisuus:

<form novalidate="novalidate">

Miten kenttien tarkistukset toimivat nyt? Tarkistuksia ei suoriteta jos novalidate-ominaisuus on asetettu. Tarkistukset voi kuitenkin halutessaan suorittaa javascriptin kautta kutsumalla checkValidity()-metodia joko yksittäiselle kentälle tai koko lomakkeelle. Kokeile.

Lomakkeen tarkistuksien aiheuttamat virheilmoitukset saat näkyville, kun kutsut reportValidity()-metodia, joko yksittäiselle kentälle tai koko lomakkeelle.

Lomakkeen muotoilu

Lomakekenttien ulkoasua voi hieman muokata CSS:n avulla. Suuria muutoksia ei kuitenkaan kannata tehdä, koska on parempi, että kentät pysyvät tutunlaisina. Yleensä selaimet esittävätkin kentät aina kussakin käyttöjärjestelmässä yleisesti käytetyn näköisinä. Voit kuitenkin muutella kenttien kokoa, tekstin koko, värejä ja rajoja.

Kokeile sivullasi seuraavia CSS-sääntöjä:

input:invalid {
  border: 2px dashed red;
  padding: 2px;
}

input:valid {
  border: 2px solid black;
  padding: 2px;
}

:invalid- ja :valid-valitsimilla pääsee muotoilemaan erikseen epävalideja ja valideja kenttiä. Kokeile miten kenttien ulkoasu muuttuu sen perusteella onko kenttään syötetty arvo kelvollinen vai ei.

Samaan tapaan toimivat myös :required- ja :optional-valitsimet

Lomakkeen validointi javascriptillä

Suurimman osan rajoituksista pystyi tekemään ilman javascriptia. Kaikkea ei kuitenkaan pysty vaan täytyy käyttää Constrain validation API:a.

Esimerkiksi omat virheilmoitukset täytyy asettaa javascriptin avulla. Lisää sähköpostikenttään oma virheilmoitus seuraavaan tapaan. Liitä seuraava koodi WWW-sivuusi onload-tapahtuman yhteyteen: 

let email = document.forms[0].email;

email.addEventListener("input", function (e) {
  let email = e.target;
  // jos rikotaan rajoitteita eli tässä tapauksessa osoite ei vastaa haluttua niin asetetaan virheilmoitus
  // katso ei vaihtoehdot: https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
// Tällä voi tarkistaa kaikki: if (!email.validity.valid) {
  if (email.validity.patternMismatch) {
    email.setCustomValidity("Syötä @student.jyu.fi-päätteinen sähköpostiosoite");
    email.reportValidity();
  } else {
    // jos kaikki ok niin virheilmoitus pitää asettaa tyhjäksi merkkijonoksi
    email.setCustomValidity("");
    email.reportValidity();
  }
});

Kokeile toimiiko oma virheilmoitus. Jos toimii niin lisää samaan tapaan oma virheilmoitus sähköpostiosoitteen ja puhelinnumeron yhteyteen.

Huom. ValidityState.validity.valid on epätosi, jos kenttä rikkoo mitä tahansa rajoitteitaan tai setCustomValidity-metodilla on asetettu jokin virheteksti.

Javascript-ohjelmassa on käytettävissä invalid-tapahtuma. invalid-tapahtuma tapahtuu submit-tapahtuman yhteydessä kaikille kentille joiden syöte ei ole validi. Lisää seuraava koodi ja kokeile sitten lomakkeen tallenna-painiketta.

    email.addEventListener("invalid", function (e) {
         console.log("virheellinen syöte kentässä :", e.target);
    });

Kurssivalinta

Jos vaaditaan, että täytyy valita yksi tai useampi kurssi (checkbox) niin HTML5:n omat rajoitteet eivät riitä. Yksittäisen checkboxin voi asettaa pakolliseksi mutta sitä ei saa yhdistettyä joukkoon. Lisää kurssivalintaan oma tarkistus seuraavasti:

Meter

Kokeile meter-elementtiä. Muuta pituuden syöttäminen tavalliseksi text-tyyppiseksi kentäksi. Lisää sen viereen meter-elementti. Yhdistä meter-elementti syötettyyn pituuteen siten, että meter havainnollistaa mikä pituus on syötetty:

let pituus = document.forms[0].pituus;
let meter = document.forms[0].meter;
// alustetaan meterin oletusarvoksi sama mitä pituudessa
meter.value = pituus.value;

// seurataan pituuden muutoksia ja päivitetään ne meteriin
pituus.addEventListener("input", function (e) {
 let pituus = e.target;
 meter.value = pituus.value;
});

Progress

progress-elementti toimii samaan tapaan kuin meter. progress kuvaa miten pitkällä jonkin tehtävän suorittaminen on. progress ei voi saada negatiivista arvoa.

Toteuta progress-elementillä kurssi-valinnan viereen havainnollistus siitä kuinka lähellä opiskelijan valmistuminen on. Mitä useampia kursseja listasta valitsee niin sitä pidemmällä progress-palkki on ja jos on valinnut kaikki kurssit niin progress on täynnä.

Lomakkeen tietojen käsittely

Lisää lomake-elementin submit-tapahtumalle oma käsittelijä. Kokeile myös miten eri tavalla toimii, jos liitätkin buttonin click-tapahtumalle vastaavan käsittelijän. Toinen suorittaa tarkistukset ja toinen ei. Myös sillä on vaikutusta onko lomakkeen novalidate-attribuutti asetettu vai ei.

Käy tallenna-painikkeen klikkauksen jälkeen läpi koko lomakkeen sisältö ja tulosta kaikkien lomakekenttien sisältö konsoliin tai suoraan sivulle lomakkeen jälkeen. Lomakkeen sisältämiin kenttiin pääsee suoraan käsiksi []-operaattorilla. Huomaa, että myös fieldsetit ovat mukana eli sinun on syytä testata kenttien tyypit.

radiopainikkeet ja select-elementti palauttavat oletuksena yhden arvon. Tämän saa helposti suoraan document.forms-rajapinnan kautta: 

console.log( "sukupuoli", document.forms.malli.sukupuoli.value );
console.log( "laitos", document.forms.malli.laitos.value );

Ei siis tarvitse erikseen tutkia mikä elementti on valittu (checked/selected).

Responsiivisuus

Voit testata lomakkeen toimintaa erilaisissa ympäristöissä Chromen Device Modella tai Firefoxin Responsive Design Modella.

Kokeile tehdä mediakyselyiden avulla lomake paremmin käytettäväksi pienillä näytöillä. Kts. Responsiivinen web-suunnittelu. Yritä saada lomake toimimaan 360x640-resoluution näytöllä ilman sivuttaista skrollbaria.

Keskeneräinen malli

Käyttäjien kommentit

Kommentoi Lisää kommentti
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta