Tredun ohjelmistokehittäjien kurssimateriaaleja
HTML-lomakkeilla kerätään käyttäjältä tietoa. Kun käytämme lomakkeiden kanssa JavaScriptiä voimme:
Tässä kohtaa emme vielä lähetä tietoja palvelimelle, vaan käsittelemme lomaketta vain selaimessa.
Tässä on yksinkertainen lomake:
<form id="myForm">
<label>
Nimi:
<input type="text" id="name">
</label>
<input type="submit" value="Lähetä">
</form>
Oleellista pitää huolta, että lomakkeella on id ja siitä löytyy submit-tapahtuma, joka tässä tapauksessa löytyy jälkimmäisen inputin tyyppinä.
Jos haluamme ottaa vastaan lomakkeen tietoja, meidän pitää valita lomake JavaScriptillä. Sitä käsitellään kokonaisuutena.
const form = document.querySelector("#myForm");
Lomakkeelle lisätään seuraavana submit-event. Kun joko painetaan submit-nappia tai painetaan enteriä, se laukaisee submit-eventin.
form.addEventListener("submit", function (event) {
// käsittely tähän
});
Oletuksena lomake yrittää lähettää lomakkeen tiedot ja ladata sivun uudelleen. Yleensä kun käytämme JavaScriptiä, me emme halua, että sivua ladataan uudelleen (PHP:n kanssa yleensä haluamme). Tämä toiminto pitää siis estää. Lomakkeen käsittelyyn lisäämme siis ensimmäiseksi riviksi seuraavan:
event.preventDefault();
Syötekentät luetaan yksi kerrallaan .value-ominaisuudella.
const nameInput = document.querySelector("#name");
const name = nameInput.value;
Huomiona, että .value on aina merkkijono, vaikka kenttään olisi kirjoittanut numeroita. Jos meidän on tehtävä syötteellä laskutoimituksia, syöte on muutettava erikseen numeroiksi. Tähän ei auta sekään, että inputin tyyppi on numero. Jos kenttä on tyhjä, se on tyhjä merkkijono lähetyksessä eli "".
Kun lomake on lähetetty, on tarpeen tyhjentää lomake, kun sivua ei ole ladattu uudelleen. Se tapahtuu seuraavasti:
form.reset();
Vaikka lomakkeessamme käytettäisiin jo valmiiksi inputin tyyppejä sekä vaadituissa kentissä requiredia, lomakkeelle tehdään silti validointia. Lähtökohtana jälleen meidän pitää olettaa, että käyttäjät ovat tyhmiä ja voivat kirjoittaa lomakkeelle mitä vain.
Yleensä ensimmäinen askel on tarkistaa, onko syöte tyhjä. Sen voi tehdä esimerkiksi seuraavasti, missä kirjoitetaan ilmoitus konsoliin:
if (name === "") {
console.log("Nimi puuttuu");
}
Lisäksi lomakkeen syötettä kannattaa tarkistaa useammalla tavalla. Jos haluamme tekstimuotoista syötettä, yleensä pitää tarkistaa, onko sen pituus oikeanlainen. Jos esimerkiksi haluamme käyttäjän nimen, voimme olettaa, että sen on oltava vähintään kaksi merkkiä pitkä, mutta meidän ei tarvitse olettaa sen olevan yli 50 merkkiä (jos nimeen yritetään laittaa jotain pidempää, voidaan olettaa, että siihen yritetään kirjoittaa jotain muuta).
Tässä tarkistetaan nimen pituus:
if (name.length < 2) {
console.log("Nimen täytyy olla vähintään 2 merkkiä pitkä");
}
if (name.length > 50) {
console.log("Nimi on liian pitkä");
}
Ennen kuin syötettä lähetetään minnekään, sitä on hyvä siistiä eli poistaa siitä mahdolliset ylimääräiset välilyönnit.
const cleanName = name.trim();
Tässä on esimerkkikoodi, jossa käyttäjältä kysytään nimeä ja hän saa virheilmoituksia, jos lomake on täytetty väärin, ja onnistumisilmoituksen, jos lomake on täytetty oikein. Hyvin suunniteltu lomake antaa palautetta myös onnistumisesta.
<form id="nameForm">
<label for="name">
Nimi:
</label>
<input type="text" id="name">
<button type="submit">Lähetä</button>
<p id="feedback" class="feedback"></p>
</form>
.feedback {
margin-top: 10px;
font-size: 0.9rem;
}
.feedback.error {
color: red;
}
.feedback.success {
color: green;
}
const form = document.querySelector("#nameForm");
const nameInput = document.querySelector("#name");
const feedback = document.querySelector("#feedback");
form.addEventListener("submit", function (event) {
event.preventDefault();
const name = nameInput.value.trim();
// Tyhjennetään vanha palaute
feedback.textContent = "";
feedback.className = "feedback";
// Validointi
if (name === "") {
feedback.textContent = "Nimi on pakollinen tieto.";
feedback.classList.add("error");
return;
}
if (name.length < 2) {
feedback.textContent = "Nimen täytyy olla vähintään 2 merkkiä pitkä.";
feedback.classList.add("error");
return;
}
if (name.length > 50) {
feedback.textContent = "Nimi saa olla enintään 50 merkkiä pitkä.";
feedback.classList.add("error");
return;
}
// Onnistunut lomake
feedback.textContent = "Kiitos! Lomake on täytetty oikein.";
feedback.classList.add("success");
form.reset();
});
Lopuksi saattaisimme haluta näyttää annetut tiedot sivulla. Sitä varten meillä on lista ilmoittautuneista (huom, lista tyhjenee, kun sivu ladataan uudelleen.)
<h2>Ilmoittautuneet:</h2>
<ul id="nameList"></ul>
// Luodaan uusi listaelementti
const listItem = document.createElement("li");
listItem.textContent = name;
// Lisätään se sivulle
nameList.appendChild(listItem);
Voimme luoda uusia elementtejä JavaScriptillä käyttäen createElementiä. Sille määritellään muuttujana nimi ja sille annetaan ensin elementin tyyppi eli HTML-tag, joka halutaan luoda.
Sitten muuttujalle voidaan antaa sisältö eli esimerkiksi käyttäjän syötteestä poimittu muuttuja käyttämällä textContentia.
Lopuksi voimme lisätä tämän uuden elementin toisen elementin sisälle käyttämällä appendChildia. Tyypillisesti lisäämme asioita listaan, mutta voimme lisätä niitä mihin vain elementtiin, jonka sisään voimme lisätä toisen elementin.
Anna Metsäpelto, 04567898908, Tampere.