Lomakkeet ja validointi - Viikkotehtävä 3

• Yhteiset vaatimukset
• Taso 1
• Taso 3
• Taso 5

Tässä tehtävässä opitaan HTML5-lomakkeiden rakentamista ja syötteiden validointia.

Käy ensin läpi nämä materiaalit:

• WWW-lomakkeet
• Lomakkeet
• Lomakkeet ja validointi - pääteohjaus
• Responsiivisuus ja mediakyselyt
• Asemointi CSS:n avulla

Yhteiset vaatimukset

Kaikille tasoille yhteiset vaatimukset ovat:

• Javascript-ohjelmassa on käytettävä Strict modea
• XHTML-tiedoston täytyy olla validia XHTML5/HTML5:sta eli XML-yhteensopivasti kirjoitettua HTML5:sta. Myös Javascriptilla tuotetun koodin on oltava validia. Validointiskripti on linkitetty valmiiseen pohjaan. Validoinnin voi aktivoida CTRL+ALT+V-näppäinyhdistelmällä ja virheet näkee konsolista.

  Valmiissa pohjassa on myös automaattinen htmlinspector-tarkistus, joka suoritetaan automaattisesti aina, kun sivun rakenne dynaamisesti muuttuu. Mahdolliset virheilmoitukset näkyvät konsolissa.

• CSS-tiedoston on oltava validi
• Kaikki javascript-funktiot, jotka sallivat lisätä suoraan käsin kirjoitettua html-koodia sivun sisältöön, ovat kiellettyjä. Vastauksen tasosta riippumatta tuloksena on 0 pistettä, jos tätä kieltoa rikotaan. Esim. innerHTML, write tai writeln-funktioita ei saa käyttää.
• alert-funktion käyttäminen on ehdottomasti kiellettyä
• Ulkoisten kirjastojen käyttäminen on kielletty.
• Valmiin sivun pitää toimia Firefoxilla (v115.0 tai uudempi) ja Googlen Chromella (v115.0 tai uudempi).
• Koodin oleelliset osat on oltava kommentoitu.
• Kaikkien tiedostojen merkistönä on käytettävä UTF-8-merkistöä.
• Kaikki vertailut ja järjestämiset ovat caseinsensitive, jollei muuta mainita
• Kaikki rajoitukset ja tarkistukset, jotka voidaan tehdä suoraan lomake-elementtien ominaisuuksilla (min, max, maxlength, minlength, pattern, required) on toteutettava ilman javascriptia.
• Kaikissa virheilmoituksissa on käytettävä Constraint Validation API:a.
• Tietorakenne on sisällöltään lähes sama kuin viikkotehtävässä 2, mutta data on tällä kerralla JSON-muodossa. Sen sisältö on kuitenkin dynaaminen : Rastien ja sarjojen tunnisteet (id) muuttuvat jokaisella latauskerralla, kuten myös sarjojen ja leimaustapojen nimet. Tietorakenne on suoraan linkitetty ja ladattu valmiiseen pohjaan, josta voit lukea tarkemmat ohjeet.
• Lomakkeilla on osattava käyttää label-elementtiä oikealla tavalla. Tämä tarkoittaa, että jokainen lomake-elementti täytyy kyetä valitsemaan/aktivoimaan sitä vastaavaa label-elementtiä klikkaamalla.
• Lomakkeita (form-elementti) ja niiden kenttiä (input-, select- ja textarea-elementit) on käsiteltävä document.forms-rajapinnan kautta. Muut tavat eivät kelpaa. Älä käytä lomakekenttien etsimiseen ja käsittelyyn getElementsByTagName-, querySelector-, querySelectorAll- tai getElementById-metodeja, ellei tähän ole erityisen hyvää syytä. Perustele mahdollinen syy koodin kommenteisssa. Käytä:
  • Document.forms
  • HTMLFormElement.elements
• Javascript-koodia saa olla vain ja ainoastaan vt3.js-tiedostossa. HTML-koodin seassa ei saa olla merkkiäkään javascriptiä. Esim. tapahtumankäsittelijöitä ei saa asettaa html-koodissa. Kielto koskee myös javascript-koodilla dynaamisesti HTML-koodiin lisättyä javascript-koodia.
• Valmiissa pohjassa oleva JSHint ei saa antaa koodistasi mitään varoituksia tai virheilmoituksia.
• Tapahtumankäsittelijöitä saa lisätä vain addEventListener-funktiolla. Kaikki muut tavat ovat ehdottomasti kiellettyjä.
• Mitään tietorakenteessa olevia id:tä tai nimiä ei pidä kovakoodata yhtään minnekään. Ainut mitä saa rakenteen sisällöstä olettaa on, että siellä on rasteja joiden rastikoodi on "LAHTO" ja "MAALI"

Taso 1

Ota käyttöösi valmis pohja gitlabista. Luo gitlabiin oma fork.

Luo valmiiseen pohjaan lomake, jolla voi lisätä tietorakenteeseen uusia joukkueita. Voit kirjoittaa xhtml-tiedostoon valmista html-koodia niin paljon kuin haluat. Myös CSS:ää voi käyttää, mutta kaikki css on oltava tyylit.css-tiedostossa. Lomakkeen layoutin on näytettävä seuraavalta:

Sarjojen nimet eivät ole välttämättä samat kuin mallikuvassa. Lomakkeen on toimittava oikein riippumatta tietorakenteessa olevien sarjojen lukumäärästä ja nimistä. Sarjat on esitettävä lomakkeella aakkosjärjestyksessä.

Joukkueen lisäämisen jälkeen lomake on tyhjennettävä ja palautettava alkutilanteeseen.

Joukkueelle on lomakkeella syötettävä seuraavat tiedot:

• Nimi
• Sarja
  • Sarja on valittava radiobuttonien avulla tietorakenteessa olemassaolevien sarjojen joukosta. Huom! Radiobutton-valinnassa täytyy aina olla jokin oletuksena valittuna
• Jäsenten nimet (1 - 2 kappaletta).
  • Jokaisen jäsenen nimi on syötettävä omalla kentällä.
  • Jäsenen nimi ei voi sisältää pelkästään välilyöntejä tai muuta whitespacea
  • Tyhjiä kenttiä ei joukkuetta tallennettaessa huomioida
  • Jäseniä on syötettävä vähintään yksi eli vähintään missä tahansa jäsenkentässä pitää olla sisältöä. Muussa tapauksessa jäsenten nimikenttien yhteydessä on ilmoitettava virheestä virheilmoituksella "Joukkueella on oltava vähintään yksi jäsen". Käytä setCustomValidity()- ja reportValidity()-metodeja virheen ilmoittamiseen..
  • Joukkueen lisäämisen jälkeen koko lomake tyhjennetään

Lomakkeen on osattava seuraavat tarkistukset ja rajoitukset:

• Kahta samannimistä joukkuetta ei saa tallentaa tietorakenteeseen. Kaikilla joukkueilla on oltava uniikki nimi. Nimiä vertailtaessa ei huomioida alussa tai lopussa olevia välilyöntejä eikä isoja ja pieniä kirjaimia.. Nimet: "Joukkue", "joukkuE" ja " joukkue" olisivat siis samoja. Vertailu on caseinsensitive. Jos yritetään syöttää samannimistä, niin tästä on näytettävä virheilmoitus nimikentän yhteydessä (reportValidity())
• Joukkueen nimi ei saa olla tyhjä
• Joukkueen nimen on oltava vähintään kaksi merkkiä. Nimen alussa ja lopussa olevia välilyöntejä ei lasketa mukaan nimen pituuteen.
• Joukkuetta ei saa tallentaa, jos jokin kenttä rikkoo rajoitteita

Lisätylle joukkueelle on tallennettava automaattisesti myös seuraavat tiedot:

• Leimaustapana on oltava [0]
• Rastileimaukset ovat aina []

Muista tallentaa valittu sarja samalla tavalla kuin jo tietorakenteessa olevissa joukkueissa.

Label-elementtejä on osattava käyttää järkevästi. Kentän otsikkoa (label) klikattaessa on kyseisen kentän aktivoiduttava tai tultava valituksi. Tämä on toteutettava ilman javascript-koodia.

Lomakkeen ulkoasun on vastattava mallikuvaa.

Lisää sivun loppuun listaus joukkueiden nimistä ja sarjoista aakkosjärjestyksessä ja joukkueiden jäsenten nimistä myös aakkosjärjestyksessä. Lista on esitettävä kahtena sisäkkäisenä järjestämättömänä listana (ul- ja li-elementit). Listaus täytyy päivittää aina, kun uusia joukkueita lisätään. Joukkuelistauksen on oltava näkyvissä heti. Esimerkki listauksesta:

• Joukkue A 8 h
  • Jäsen A
  • Jäsen B
  • Jäsen C
• Joukkue B 2 h
  • Jäsen A
  • Jäsen B
• Joukkue C 2 h
  • Jäsen A
  • Jäsen B

Sivulla ei saa käyttää taulukoita

Sivu ei saa sovellusta käytettäessä latautua uudelleen eikä selain saa siirtyä uuteen osoitteeseen

Toteutetun sivun pitää olla responsiivinen eli mukautua erilaisiin näyttökokoihin. Sivusuuntaista skrollbaria ei saa tulla yli 640 pikselin näytöillä. Sivun ulkoasun on vastattava mallikuvia. Lomakkeen on mahduttava näytölle myös kapeissa selainikkunoissa. Leveällä näytöllä lomake EI saa olla koko ikkunan leveyinen vaan labelien on oltava järkevän etäisyyden päässä niihin liittyvistä kentistä.

Taso 3

Toteuta taso 1 ja sen jälkeen laajenna seuraavanlaiseksi:

Leimaustavat on listattava lomakkeella aakkosjärjestyksessä

Kysy lomakkeella myös seuraavat tiedot:

• Leimaustapa
  • Valittava valintaruutujen avulla vähintään yksi data-tietorakenteesta löytyvistä (data.leimaustapa) leimaustavoista. Leimaustavat tallennetaan joukkueen yhteyteen käyttäen data.leimaustapa-taulukon indeksejä. Esim. joukkueella Retkellä v 13 on leimaustapoina GPS ja NFC. Jos yhtään ei ole valittuna, niin virhe on ilmaistava valintaruutujen yhteydessä reportValidity-funktiolla.
• Lisää joukkuelistaukseen myös kunkin joukkueen leimaustavat:
  • Joukkue A 8 h (GPS, NFC)
    • Jäsen A
    • Jäsen B
    • Jäsen C
  • Joukkue B 2 h (GPS)
    • Jäsen A
    • Jäsen B
  • Joukkue C 2 h (QR, Lomake)
    • Jäsen A
    • Jäsen B
• Jäsenten nimet (2 - n kappaletta).
  • Jäseniä on syötettävä vähintään kaksi eli vähintään kahdessa missä tahansa jäsenkentässä pitää olla sisältöä. Jäseniä voi syöttää n kappaletta.
  • Syöttökenttiä pitää muokatessa olla aina oikea määrä eli vain yksi tyhjä. Mahdolliset ylimääräiset pitää poistaa. Kts. malli.
  • Joukkueella ei voi olla kahta samannimistä jäsentä. Nimissä ei huomioida isoja ja pieniä kirjaimia eikä nimen alussa tai lopussa olevia välilyöntejä.
• Mahdollista joukkueiden tietojen muokkaaminen
  • Tee joukkuelistauksessa olevista joukkueiden nimistä linkkejä. Klikattaessa joukkueen nimestä tehtyä linkkiä siirrytään sivulla lomakkeen kohdalle ja haetaan kyseisen joukkueen tiedot lomakkeelle muokattavaksi. Muokkauksen ja lomakkeen tallentamisen jälkeen korvataan tietorakenteessa uusilla tiedoilla muokattavaksi haetun joukkueen tiedot. Huom. joukkueen tiedot eivät saa muuttua, jos muutoksia ei hyväksytä tallenna-painikkeella.
  • Joukkueen tietoja ei saa tallentaa, jos jokin lomakkeen kenttä rikkoo rajoitteita. Tietoja muutettaessa ovat voimassa samat rajoitteet, kuin uutta joukkuetta lisättäessä.
  • Joukkueelta täytyy kyetä poistamaan jäseniä tyhjäämällä jäsenen nimi tai klikkaamalla nimen vieressä olevaa ruksia (punainen x-kirjain). Poistamisen voi tehdä vain jos jäseniä on syötetty enemmän kuin kaksi kappaletta.

    

  • Joukkueelle täytyy pystyä lisäämään uusia jäseniä eli tarjolla täytyy olla aina yksi tyhjä jäsenkenttä
  • Joukkuelistaus pitää päivittää joukkueen tietojen muuttamisen ja tallentamisen jälkeen
  • Joukkueen tietojen tallentamisen jälkeen koko lomake tyhjennetään ja tyhjiä jäsenkenttiä on tarjolla kaksi
  • Lisää lomakkeelle myös Cancel-painike, jolla joukkueen muokkaaminen perutaan ja lomake palaa lisäystilaan
• Luo uusi lomake, jolla voit lisätä uusia leimaustapoja
  • Leimaustavalle on pakko antaa vähintään kaksi merkkiä pitkä nimi
  • Leimaustavan nimi ei saa olla sama, kuin jo olemassa olevalla leimaustavalla. Nimissä ei huomioida isoja ja pieniä kirjaimia eikä nimen alussa tai lopussa olevia välilyöntejä.
  • Uuden leimaustavan lisäämisen jälkeen on joukkuelomake päivitettävä vastaamaan uutta leimaustapavalikoimaa.

Taso 5

Toteuta ensin taso 3 ja sen jälkeen laajenna seuraavasti:

Parantele joukkuelomaketta seuraavasti:

• Lisää syötettäviin ja muutettaviin tietoihin joukkueen rastileimaukset (0 - n kappaletta). Ulkoasun on näytettävä seuraavan tyyppiseltä suomenkielisiä päivämääräasetuksia käyttävässä firefox- ja Chrome-selaimessa.
  
  • Leimattu rasti syötetään text-tyyppiseen kenttään, mutta hyödynnetään datalist-ominaisuutta. Ehdota oikeita rastikoodeja syöttämisen yhteydessä (datalist). Ehdota vain sellaisia koodeja, joita joukkue ei ole jo leimannut. Kelpuuta kenttään vain oikeat rastikoodit.
  • Rastileimausaika saa olla vain sarjan alku- ja loppuajan väliltä. Jos sarjalle ei ole annettu alku- ja loppuaikaa, niin käytetään kilpailun alku- ja loppuaikaa. Poikkeus: Jos tietorakenteessa jo on leimauksia, jotka rikkovat edellämainittuja rajoitteita, niin nämä sallitaan. Ts. uusia ja virheellisiä leimauksia ei saa syöttää tai muuttaa, mutta rakenteessa jo olemassaolevat täytyy säilyttää. Käytä rastileimausajan syöttämiseen datetime-local-tyyppistä kenttää.
  • Kellonajat on tallennettava tietorakenteeseen samassa muodossa, kuin jo tietorakenteessa olemassa olevat tiedot. Esim. 2019-10-01 10:30. Huom. Chromen tai muiden selainten lomakkeella datetime-local-tyyppisessä kentässä esittämä muoto on vain esitysmuoto. Lomakekentän arvo on lähes ISO-standardimuodossa Esim. 2019-10-01T10:30. Tietorakenteessa käytetty muoto EI ole ISO-standardimuoto eikä myöskään suoraan kenttään kelpaava muoto.
  • Rastileimauksia varten ilmestyy uusia kenttiä tarpeen mukaan.
  • Leimaukset on listattava aikajärjestyksessä
  • Joukkueelta voi myös poistaa rastileimauksia. Checkboxilla merkityt (checked) rastileimaukset poistetaan, kun lomake tallennetaan. Kysy käyttäjältä varmistus, jos yritetään tehdä poistoja. Kts. Window.confirm()
  • Tässä voi käyttää taulukkoa: rastin valinta on ensimmäisessä sarakkeessa, aika toisessa sarakkeessa ja poistamisen ilmaiseva checkbox kolmannessa sarakkeessa.
  • Samaa rastia ei saa leimata kahteen kertaan. Poikkeus: Jos tietorakenteessa jo esiintyy duplikaattileimauksia, niin näiden annetaan säilyä joukkueen tiedoissa.
  • Myös epäkelpojen rastileimausten on oltava muokattavissa