Testikenttä
Testikenttä 2
CSS
input:invalid { border: 1px solid red; }
HTML
Testikenttä
Testikenttä 2
Javascript
let testi = document.forms.lomake.testi; testi.addEventListener("input", function(e) { let testi = e.target; // nollataan virheilmoitus testi.setCustomValidity(""); if ( testi.value != "testi" ) { testi.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(); }); testi.addEventListener("blur", function(e) { e.target.reportValidity(); }); let tavallinen = document.forms.lomake.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(); });
Konsoli