Lomakemalli

CSS

HTML

<p>Sivu on syytä ladata uudelleen jokaisen testauksen jälkeen (Ctrl+R tai F5), jotta lomakkeen
virheilmoitukset nollautuvat. Jos lataat sivun ohi välimuistin (Ctrl+Shift+R), myös
valintaruudut ja muut lomakkeen valinnat nollaantuvat.

</p>
<form id="lomake" action="ei toimi">
<div class="right">
<label><input id="preventDefault" type="checkbox" checked="checked" value="1" /><span>preventDefault on käytössä</span></label>
<label><input id="novalidate" type="checkbox" value="1" /><span>novalidate on käytössä päällä</span></label>
<label><input id="reportvalidity" type="checkbox" value="1" /><span>reportValidity on käytössä</span></label>
</div>
<label><input class="event" data-oma="input" type="text" value="" /><span></span></label>
<label><input class="event" data-oma="change" type="text" value="" /><span></span></label>
<label><input class="event" data-oma="blur" type="text" value="" /><span></span></label>
<label><input class="event" data-oma="input" type="checkbox" value="" /><span></span></label>
<label><input class="event" data-oma="change" type="checkbox" value="" /><span></span></label>
<label><input class="event" data-oma="blur" type="checkbox" value="" /><span></span></label>
<label><input class="event" data-oma="input" type="radio" name="radioryhma" value="" /><span></span></label>
<label><input class="event" data-oma="change" type="radio" name="radioryhma" value="" /><span></span></label>
<label><input class="event" data-oma="blur" type="radio" name="radioryhma" value="" /><span></span></label>
<label><select class="event" data-oma="input"><option value="1">Eka</option><option value="2">Toka</option></select><span></span></label>
<label><select class="event" data-oma="change"><option value="1">Eka</option><option value="2">Toka</option></select><span></span></label>
<label><select class="event" data-oma="blur"><option value="1">Eka</option><option value="2">Toka</option></select><span></span></label>

<label>Testinumero <input id="numero" type="number" required="required" value="" /> pakollinen kenttä</label> 
<p><input id="submit" type="submit" value="Submit-painike, click-tapahtuma" /></p>
<p><button id="button">button, click-tapahtuma</button></p>
<p><input type="submit" value="Submit-painike lomakkeen submit-tapahtuma" /></p>

</form>
<pre id="loki"></pre>

Javascript

// oletusasetukset, mutta eivät välttämättä ole samat mitä lomakkeella näkyy,
// jos lomakesivu on ladattu uudelleen ilman Ctrl+Shift+R-näppäinyhdistelmää niin
// selain saattaa pitää edelliset valinnat näkyvissä
// avaimet ovat samat kuin html-koodissa vastaavien checkboxien id-arvot
let asetukset = {
    "preventDefault": true,
    "novalidate": false,
    "reportvalidity": false // tässä ei voi avaimena käyttää reportValidity, miksi ei? Katso viimeinen funktio, jossa kutsutaan reportValidity()-funktiota
}
let counter = 1;
let laskurit = {};

// lomakkeen käsittelemisen tapahtumat etenevät seuraavasti:
// submit-tyyppisen painikkeen tai button-elementin click-tapahtuma tapahtuu ensimmäiseksi
// jos näissä kutsutaan preventDefault() niin muuta ei tapahdu
// jos preventDefault()-metodia ei kutsuta niin click-tapahtuman jälkeen tapahtuu
// lomakkeen submit-tapahtuma, jonka jälkeen sivu lähetetään palvelimelle, ellei tätä taas estetä kutsumalla
// preventDefault()-metodia.
// ts. tapahtuu kaksi tapahtumaa ensin click ja sen jälkeen submit
// lomakkeen käsitteleminen voidaan hoitaa ilman click-tapahtumaa suoraan submit-tapahtumassa, mutta
// tätä ei tapahdu, jos lomakkeella on virheitä! Vasta lomakkeen ollessa virheetön
// tapahtuu lomakkeen submit-tapahtuma. Poikkeus: lomakkeella on asetettuna novalidate-attribuutti

// Huom. koodi suoritetaan Run-painikkeesta, jolloin sivu on jo latautunut.
// Siksi tässä EI kääritä koodia load-tapahtuman käsittelijään: se ei
// laukeaisi enää koskaan. Omalla sivulla käytä defer-attribuuttia tai
// DOMContentLoaded-tapahtumaa.

"use strict";

{
  // asetetaan painikkeille click-tapahtumankäsittely
  // Huom. kentät haetaan elements-kokoelmasta. Suora lomake.submit viittaisi
  // painikkeeseen eikä lomakkeen submit()-metodiin - juuri se nimitörmäys,
  // josta luentomateriaali varoittaa.
  document.forms.lomake.elements.submit.addEventListener("click", click_submit);
  document.forms.lomake.elements.button.addEventListener("click", click_submit);

// asetetaan lomakkeelle submit-tapahtuman käsittely
  // jos lomakkeella on virheitä niin tämä tapahtuma ei tapahdu!
  document.forms["lomake"].addEventListener("submit", click_submit);
  
  // alustetaan asetukset vastaamaan sivulla esitettävien checkboxien tilannetta
  for( let avain of ["preventDefault", "novalidate", "reportvalidity"] ) {
      let checkbox = document.forms.lomake[avain];
      checkbox.addEventListener("change", muuta);   
      asetukset[avain] = checkbox.checked;
      aseta_teksti( checkbox );
  }  
  // haetaan kaikki testi-input-kentät ja asetetaan niille sama tapahtumankäsittelijä
  // tapahtuma, johon käsittelijä asetetaan, haetaan elementin data-oma-attribuutista
  for( let input of document.getElementsByClassName("event") ) {
      let event = input.getAttribute("data-oma");
      input.addEventListener( event, tapahtuma );
      let teksti = event + "-tapahtuma";
      input.setAttribute("value", teksti);
      input.parentNode.insertBefore( document.createTextNode(teksti + " "), input );
      laskurit[event] = 0;
  }
}

// näyttää kentän vieressä laskurin ja tulostaa konsoliin tapahtuman tyypin ja aiheuttaneen elementin tyypin
function tapahtuma(e) {
        console.log( e.type, e.target.type );
        e.target.nextSibling.textContent = ++laskurit[e.type];
}

// asettaa checkboxin vieressä olevan tekstin
function aseta_teksti(obj) {
     if ( !obj.checked ) {
        obj.nextSibling.textContent = obj.id + " ei ole käytössä"
     }
    else {
        obj.nextSibling.textContent = obj.id + " on käytössä"
    }
}

function muuta(e) {
    let asetus = e.target.id;
    asetukset[asetus] = !asetukset[asetus];
    aseta_teksti( e.target );
    // DOM-ominaisuuden nimi on noValidate isolla V:llä. Pienellä kirjoitettuna
    // se ei tee mitään, ja lisäksi se korvaisi lomakkeen nimihaun samannimiseen
    // checkboxiin (id="novalidate").
    document.forms["lomake"].noValidate = asetukset["novalidate"];
}

function click_submit(e) {
        document.getElementById("loki").textContent += "submit-tapahtumassa " + e.target.id + " : " + counter++ + "\n";
        const numero = document.forms.lomake.elements.numero;

// Oma virheilmoitus on AINA tyhjennettävä ensin. Muuten kerran
        // asetettu ilmoitus jää voimaan ja kenttä pysyy epävalidina,
        // vaikka sisältö korjattaisiin.
        numero.setCustomValidity("");
        if ( !numero.checkValidity() ) {
            numero.setCustomValidity("virheellinen syöte");
            numero.reportValidity(); // tai vain yhdelle kentälle tätä
        }

// estää aina lomakkeen lähettämisen 
        if ( asetukset["preventDefault"] ) {
            e.preventDefault(); // estää lomakkeen tarkistuksien suorittamisen click-tapahtuman yhteydessä, mutta ei lomakkeen submit-tapahtumassa
        }
        // pitää kutsua reportValidity(), jos haluaa virheilmoitukset näkyville click-tapahtumien yhteydessä, jos on kutsuttu preventDefault 
        if ( asetukset["reportvalidity"] ) {
               // tätä funktiota ei voida kutsua, jos lomakkeella on kenttä, jonka id on reportValidity
               document.forms["lomake"].reportValidity();
        }
        // estetään lopullinen lomakkeen lähettäminen eteenpäin
        if ( e.currentTarget.id === "lomake" )
                e.preventDefault();
}

CSS

HTML

Javascript

Konsoli