metshein.com - 20 - Vormid ja valideerimine

20 - Vormid ja valideerimine

Kirjutas Mario Metshein

Kasutajalt andmete saamiseks tuleb veebilehele lisada vorm (form). Javascripti abiga saame antud andmeid töödelda.

Vormist andmete kättesaamine ja kuvamine

Loome pisikese kahe väljaga ja nupuga vormi.

HTML vorm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Vormid</title>
</head>
<body>
<h2>Vormid</h2>
<form action="#">
Eesnimi: <input type="text" id="enimi" size="20" /><br />
Perakonnanimi: <input type="text" id="pnimi" size="20" /><br />
<input type="submit" value="Saada"/>
</form>
<div id="vastusekiht">Siia tuleb vastus...</div>
</body>
</html>

Vormis on olulised, et igale väljale paneme id. Ja kuna me soovime, et kõik toimuks samal lehel, siis action="#".

Vormist saadud info töötlemiseks lisame javascripti funktsiooni tervitus() html lehe päisesse.

funktsioon tervitus()

...
<head>
<script type="text/javascript">
function tervitus(){
//valime kuhu kuvame teksti
document.getElementById("vastusekiht").innerHTML="Tere "+
//tekstile lisame html vormist id järgi saadud info
document.getElementById("enimi").value+
" "+
document.getElementById("pnimi").value+
"!"
;
}
</script>
</head>
...

Kui hetkelveebilehte vaadata, siis nupule vajutusega midagi ei toimu. Selleks, et funktsiooni käivitada, tuleb nupule juurde lisada sündmus funktsiooni nimega.

onclick

<input type="submit" value="Saada" onclick="tervitus()"/>

Nüüd kui väljad täita ja nupule vajutada, siis väljastatakse teade Tere Mari Maasikas!

Arvud ja vormid

Eelmine funktsioon töötab päris ilusti. Aga kujutame ette, et meil on vaja kasutada kahte välja, et leida nende summa. Kui hetkel proovida liita arvud 2 ja 3, siis kuvatakse meile vastus 23, mis ei tundu olevat õige :).

Selleks, et saaks liita tuleb antud andmed teisendada numbriteks funktsioonidega parseFloat (murdarv) või parseInt (täisarv).

liida()

function liida(){
document.getElementById("vastusekiht").innerHTML=
parseFloat(document.getElementById("enimi").value)+
parseFloat(document.getElementById("pnimi").value)
;
}

Teiste tehetaga probleeme ei tohiks olla.

Loendid ja masiivid

Vaatame kuidas kasutada loendeid ja siduda neid masiiviga. Loome hakatuseks tavalise loendi id="tooted"

loend id="tooted"

<body>
<h2>Loend</h2>
<form action="#">
<select id="tooted">
<option>Eesti Leib</option>
<option>Läti Sai</option>
<option>Soome Moos</option>
</select>
</form>
<div id="vastusekiht">Siia tuleb vastus...</div>
</body>

Kuna nuppu ei ole, siis võime sündmuse lisada siis, kui kasutaja on teinud muutuse valikus.

onChange()

<select id="tooted" onChange="naita();">

Loendis olead kirjed käituvad kui massiivi elemendid ning selle leiab selectedIndex abil.

loend

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Loend</title>
<script type="text/javascript">
function naita(){
document.getElementById("vastusekiht").innerHTML=
document.getElementById("tooted").selectedIndex;
}
</script>
</head>
<body>
<h2>Loend</h2>
<form action="#">
<select id="tooted" onChange="naita();">
<option>Eesti Leib</option>
<option>Läti Sai</option>
<option>Soome Moos</option>
</select>
</form>
<div id="vastusekiht">Siia tuleb vastus...</div>
</body>
</html>

Loome massiivi, kust loendist saadud indeksi abil väljastametoote hinna.

naita()

<script type="text/javascript">
var hind= new Array(5.75, 6.17, 3);
function naita(){
document.getElementById("vastusekiht").innerHTML=
hind[document.getElementById("tooted").selectedIndex];
}
</script>

Andmete valideerimine

Veebilehe täidetud vormi andmed saadetakse serverisse, kus andmeid kontrollitakse ja töödeldakse. Enne vormi sisestatud andmete serverisse saatmist tuleb neid kontrollida, et vältida serveri koormamist ebaõigete päringutega. Kontroll aitab vältida ka asjatud ajakulu, mis tekib andmete edasi-tagasi saatmisestnende paranamise tõttu.

Siinkohal tuleb appi Javascript, mille abil saame andmeid kontrollida. Kontrolli saab teostada mitmel viisil:

kontrollida andmeid kohe pärast nende lahtrisse sisestamist, tuues vea puhul ekraanile teatekasti või saata kursor tagasi lahtrisse
kontrollida andmeid pärast kõigi nõutud lahtrite täitmist ja tuua alles siis valesti sisestatud andmete puhul ekraanile kast veateatega

Andmete kontrollimiseks on soovitav luua funktsioon. Kuna andmed edastatakse nupuga submit, saab kontrollimisfunktsiooni käivitamiseks kasutada draiverit onSubmit.

Loome vormi jaoks Javascripti koodi, mis kontrollib ega kastid pole tühjaks jäetud ja sisaldavad nõutud asju. Loome lihtsa vormi, kuhu on vaja lisada tekst ja 11-kohaline number. Vormi nimeks saab input ja nupule vajutades käivitatakse funktsioon kontrolli.

form

<form name="input" onSubmit="return kontrolli();">
Nimi: <input type="text" name="nimi" size="20" /><br />
Isikukood: <input type="text" name="ik" size="12" maxlength="11" /><br />
<input type="submit" value="Saada" />
</form>

Kui vormi sisaldav veebileht laaditakse, siis oleks hea, kui kursor oleks aktiivne kohe esimeses lahtris. Kasutame selleks meetodid focus() ning lisame esimesse <body> silti.

<body onLoad="document.input.nimi.focus()">

Kontrollfunktsiooni lisame <head> siltide vahele. Teeme nii, et kontrollime ega nime lahter pole tühjaks jäetud. Kuna vigu võib olla rohkem, siis soovime, et kõik veateated tuleks korraga ekraanile. Selleks loome muutuja teade. Siis kontrollime kas teise kasti sisestatud sümbolite pikkus on 11 tähemärki ja siis kas tegemist on ikka numbritega.

Lõpus toome ekraanile teate, kus on kõik veateated.

andmete valideerimine

<script type="text/javascript">
function kontrolli(){
var teade="";
if(document.input.nimi.value.length == 0)
{
teade=teade+"Nimi jäi sisestamata!\n";
}
if(document.input.ik.value.length < 11)
{
teade=teade+"Isikukoodi pikkus on 11 numbrit";
}
else if(isNaN(document.input.ik.value))
{
teade=teade+"Isikukood tohib sisaldada ainult numbreid";
}
if(teade.length > 0)
{
alert(teade);
return false;
}
else
{
return true;
}
}
</script>

Pisike emaili kontrollimise kood

emaili valideerimine

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Email pole sisestatud õigesti!")==false)
{email.focus();return false;}
}
}
</script>
</head>
<body>
<form action="#" onsubmit="return validate_form(this);" method="post">
<p>Email: <input type="text" name="email" size="30"></p>
<p><input type="submit" value="Saada"></p>
</form>
</body>
</html>

HARJUTUS 10

Koosta kasutaja registreerimise vorm:
- nimi
- parool
- sünniaeg
- email

Koosta andmete valideerimine, kus kontrollid et mitte üksi väli ei jääks tühjaks, parool oleks piisava pikkusega (min 6 märki), sünniaeg õiges vahemikus ning email õige.