Numeron valinta
paino
Valinta liukusäätimellä
Datalist
31600
33101
40700
40740
40900
Sähköpostiosoitteen validointi
CSS
input:user-invalid { border: 2px dashed red; padding: 2px; } input:user-valid { border: 2px solid black; padding: 2px; } progress, meter { height: 2em; width: 50%; }
HTML
<form action="kasittelija" method="post" id="lomake"> <h2>Numeron valinta</h2> <input name="paino" type="number" min="1" max="200" step="0.1" value="70" required="required"> <progress value="70" max="200">paino</progress> <h2>Valinta liukusäätimellä</h2> <input name="ika" type="range" min="1" max="120" step="1" value="30" /> <meter min="1" max="120" value="30"></meter> <h2>Datalist</h2> <input size="42" type="text" name="postinumero" list="postinumerot" placeholder="Aloita syöttö numeroilla 3 tai 4" pattern="31600|33101|40700|40740|40900"> <datalist id="postinumerot"> <option value="31600"> <option value="33101"> <option value="40700"> <option value="40740"> <option value="40900"> </datalist> <h2>Sähköpostiosoitteen validointi</h2> <input name="email" autocomplete="off" type="email" pattern=".+@student\.jyu\.fi"> <p><input type="submit" value="Lähetä"></p> </form>
Javascript
const email = document.forms.lomake.elements.email; email.addEventListener("input", function (e) { let email = e.target; // nollataan virheilmoitus email.setCustomValidity(""); // jos syöte ei ole validi niin asetetaan virheilmoitus // tämä tarkistaisi kaikki virheet. Palauttaa true jos kaikki ok // if (!email.validity.valid) { // mutta reagoidaan omalla virheilmoituksella vain jos rikotaan patternia. Palauttaa true jos pattern ei toteudu. Kts. muut vaihtoehdot // https://developer.mozilla.org/en-US/docs/Web/API/ValidityState if (email.validity.patternMismatch) { email.setCustomValidity("Syötä @student.jyu.fi-päätteinen sähköpostiosoite"); } // varmistetaan, että virheilmoitus näkyy heti. Chrome ei näytä ilman tätä // riippuu tilanteesta kannattaako kutsua tässä vaiko vasta lomakkeen submit-painikkeen yhteydessä email.reportValidity(); }); const range = document.forms.lomake.elements.ika; const meter = document.querySelector('meter'); meter.value = range.value; range.addEventListener("input", function (e) { let range = e.target; meter.value = range.value; }); const paino = document.forms.lomake.elements.paino; const progress = document.querySelector('progress'); progress.value = paino.value; paino.addEventListener("input", function (e) { let paino = e.target; progress.value = paino.value; }); // käsitellään lomakkeen "lähettäminen" document.getElementById('lomake').addEventListener("submit", function (e) { e.preventDefault(); // tarkistaa kaikki kentät: console.log("Onko lomake validi:" + e.target.checkValidity()); // käydään vielä kaikki kentät läpi. Jos lomakkeella on fieldset-elementtejä niin myös ne tulevat mukaan for (const o of document.forms[0]) { // Tarkistukset voi ajaa myös yksittäisille kentille let v = o.checkValidity(); // tulostetaan konsoliin kentän nimi,arvo, oliko kenttä pakollinen vai ei ja onko kenttä valid vai ei console.log(o, o.name, o.value, o.required, "( " + v + " )"); o.reportValidity(); } // aktivoidaan lomakkeen normaali toiminta validoinnin yhteydessä. Esim. firefox vie kohdistimen ensimmäiseen // virheelliseen kenttään document.forms[0].reportValidity(); });
Konsoli