Lomakemalli

CSS

HTML

Javascript

"use strict";

const testi = document.forms.lomake.elements.testi;

testi.addEventListener("input", function(e) {
  const kentta = e.currentTarget;

// nollataan virheilmoitus AINA ensin: muuten kerran asetettu ilmoitus
  // jäisi voimaan ja kenttä pysyisi epävalidina korjauksen jälkeenkin
  kentta.setCustomValidity("");

if ( kentta.value !== "testi" ) {
     kentta.setCustomValidity('Tähän kenttään täytyy syöttää sana "testi"');
  }

// tämä kannattaa kutsua vasta myöhemmin eli koko lomakkeen submit-tapahtumassa
 // tai tämän kentän blur-tapahtumassa
 // testi.reportValidity();
});

// blur ei kupli, joten käsittelijä on liitettävä suoraan kenttään
testi.addEventListener("blur", function(e) {
    e.currentTarget.reportValidity();
});

const tavallinen = document.forms.lomake.elements.tavallinen;

// tavallisen painikkeen click-tapahtuma. Täällä ei tehdä tarkistuksia
// ellei itse niin komenneta
tavallinen.addEventListener("click", function(e) {
    console.log("click tapahtui");
   //täällä voisi kutsua
  //document.forms.lomake.reportValidity();
});

// submit-tapahtumassa tarkistetaan kentät automaattisesti, jos lomakkeen
// novalidate-attribuuttia ei ole asetettu
document.forms.lomake.addEventListener("submit", function (e) {
         console.log("Lomakkeen submit-tapahtuma");
         e.preventDefault(); // estetään lomakkeen lähettäminen
	// täällä voi myös kutsua koko lomakkeen reportValidity()-metodia
        // e.target.reportValidity();

});

CSS

HTML

Javascript

Konsoli