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 kirjoitettu 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, kuten esim. jquery, angularjs, käyttäminen on kielletty.
• Valmiin sivun pitää toimia Firefoxilla (v78.0 tai uudempi) ja Googlen Chromella (v83.0 tai uudempi). Muista selaimista ei tarvitse toistaiseksi välittää.
• Koodin oleelliset osat on oltava kommentoitu.
• Kaikkien tiedostojen merkistönä on käytettävä UTF-8-merkistöä.
• Kaikki rajoitukset ja tarkistukset, jotka voidaan tehdä suoraan lomake-elementtien ominaisuuksilla, on toteutettava ilman javascriptia.
• Kaikissa virheilmoituksissa on käytettävä Constraint Validation API:a.
• Tietorakenne on lähes sama kuin viikkotehtävässä 2. Sen sisältö on kuitenkin dynaaminen : Rastien ja sarjojen tunnisteet (id) muuttuvat jokaisella latauskerralla, kuten myös sarjojen ja leimaustapojen nimet. Tietorakenne on taas suoraan linkitetty valmiiseen pohjaan.
• 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.
• 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.
• Kellonajat on tallennettava tietorakenteeseen samassa muodossa, kuin jo tietorakenteessa olemassa olevat tiedot. Esim. 2019-10-01 10:30. Huom. Chromen tai muiden selainten lomakkeella esittämä muoto on vain esitysmuoto. Lomakekentän arvo on aina ISO-standardimuodossa Esim. 2019-10-01T10:30Z. Tietorakenteessa käytetty muoto EI ole ISO-standardimuoto.
• Tarkista Javascript-koodisi JSHintin avulla. Valmiissa pohjassa oleva JSHint ei saa antaa koodista mitään varoituksia tai virheilmoituksia. Voit käyttää valmista Greasemonkey-laajennoksen JSHint-skriptiä. JSHint on linkitetty valmiiseen pohjaan.
• Tapahtumankäsittelijöitä saa lisätä vain addEventListener-funktiolla. Kaikki muut tavat ovat ehdottomasti kiellettyjä.
• Omien HTML-attribuuttien keksiminen HTML-elementteihin on kiellettyä. Javascript-objekteihin saa (ja kannattaa) keksiä omia attribuutteja.

      let input = document.createElement("input");
      // Tämä on ok ja jopa suositeltavaa
      input.omajuttu = "tallennan tänne jotain omaa tietoa"; 
      input.oma = omaobjekti;
      // seuraava on väärin ja aivan tarpeetonta ja monimutkaista
      // on sama asia kuin kirjoittaisi html-koodiin: <input omajuttu="tallennan tänne jotain omaa tietoa" />
      // eli epävalidia HTML-koodia
      input.setAttribute("omajuttu", "tallennan tänne jotain omaa tietoa"); 

• 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 "LAHTO" ja "MAALI"

Taso 1

Tallenna itsellesi valmis pohja: pohja.zip

Luo valmiiseen pohjaan lomake, jolla voi lisätä tietorakenteeseen uusia joukkueita. Voit kirjoittaa 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:

Sarjat on listattava lomakkeella aakkosjärjestyksessä. Huom. 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ä.

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 (2 - n kappaletta).
  • Jokaisen jäsenen nimi on syötettävä omalla kentällä.
  • Lomakkeella saa olla valmiina kaksi kenttää jäsenten nimiä varten
  • Uusia syöttökenttiä luodaan tarpeen mukaan. Käytä input-tapahtumaa. Älä käytä muita tapahtumia. Kts. malli.
  • Tyhjiä kenttiä ei joukkuetta tallennettaessa huomioida
  • Jäseniä on syötettävä vähintään kaksi eli vähintään missä tahansa kahdessa jäsenkentässä pitää olla sisältöä. Muussa tapauksessa jäsenten nimikenttien yhteydessä on ilmoitettava virheestä virheilmoituksella "Joukkueella on oltava vähintään kaksi jäsentä". Käytä setCustomValidity()- ja reportValidity()-metodeja virheen ilmoittamiseen..
  • Joukkueen lisäämisen jälkeen ylimääräiset jäsenkentät poistetaan ja jätetään vain kaksi kenttää

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. 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]
• Joukkueelle on keksittävä automaattisesti uniikki id, joka on aina yhtä suurempi, kuin suurin käytössä oleva joukkueen id

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

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.

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.
• Jäsenten nimet (2 - 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ä haetaan kyseisen joukkueen tiedot lomakkeelle muokattavaksi. Muokkauksen ja lomakkeen tallentamisen jälkeen korvataan tietorakenteessa uusilla tiedoilla muokattavaksi haetun joukkueen tiedot.
  • Joukkueen tietoja ei saa tallentaa, jos jokin lomakkeen kenttä rikkoo rajoitteita.
  • Joukkueelta täytyy kyetä poistamaan jäseniä tyhjäämällä jäsenen nimi
  • 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 jälkeen
• 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ä seuraavalta 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- tai 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ää.
  • 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
• Joukkueen rastileimaukset (rastin koodi ja leimausaika) täytyy esittää myös joukkuelistauksessa, mutta tavalla jossa ne ovat oletuksena piilotettuna. Käytä esim. summary ja details-elementtejä.