HTML-OPAS/Javascript

Javascript-malli 3

Lomakekenttien tarkistus 1

Lomakekentistä voidaan tarkistaa erilaisia asioita. Tarkistamisen kohteena yksinkertaisimmillaan on se, että onko kentässä tietoa.

HTML- ja javascript-koodi

<HEAD>
<TITLE>js-malli3</TITLE>
<SCRIPT TYPE="text/javascript">
//tarkistusfunktio
function tarkista(lomake)
   {
//jos lomakkeen etunimi-niminen kenttä on tyhjä varoita asiasta ja
//keskeytä lomakkeen lähetys eli return false
//huomaa, että yhtä suuruus tarkistetaan kahdella == merkillä.
     if (lomake.etunimi.value == "")
               {
               window.alert ("Anna etunimesi");
               return false;
               }
     else
//jos etunimi-kenttä oli täytetty tarkista sukunimi-kenttä
               {
               if (lomake.sukunimi.value == "")
                          {
                          window.alert ("Anna sukunimesi")
                          return false;
                           }
                else
//jos molemmat kentät olivat täytettyjä palauta true eli lähetä lomake
                           {
                           return true;
                           }

}
</SCRIPT>
</HEAD>
<BODY>



<FORM NAME="lomake" onSubmit="return tarkista(document.lomake);" METHOD="post" ACTION="mailto:roipan@posti.fi">
Etunimi: <INPUT TYPE="text" NAME="etunimi"><BR>
Sukuunimi: <INPUT TYPE="text" NAME="sukunimi"><BR>
<INPUT TYPE="submit" VALUE="Lähetä lomake"><BR>
<INPUT TYPE="reset" VALUE="Tyhjennä tiedot">
</BODY>
</HTML>

Sivu uudessa selainikkunassa

Lomakekenttien tarkistus 2

Lomakentän numeraalisuuden tarkistaminen. Ohessa tehdään pieni laskin, jolla voidaan laskea yhteenlasku kahden kentän sisältämän tiedon perusteella. Monesti käyttäjät voivat syöttää kenttään laskemiseen kelpaamatonta tietoa, jolloin pitää varmistua, että kentässä oleva tieto on luku.

Tarkistamiseen käytetään isNaN-funktiota (is not a number), joka palauttaa arvon false, jos vertailtava asia on luku ja true, jos se ei ole. Lisäksi tarkistetaan onko kenttä tyhjä. If-lauseessa on ||-merkit eli javascriptin tapa sanoa TAI. Eli jos jompikumpi ei pidä paikkansa varoita käyttäjää.

Yhteenlaskussa lasketaan periaatteessa lukuja. Javascript käsittelee lomakkeen kentästä saatua tietoa merkkijonona ja, jos lasku olisi luku1+luku2 tuloksena luvuilla 12 ja 12 olisi 1212 eli oltaisiin liitetty merkkijonot peräkkäin +-merkillä. Siksi laskussa lasketaan luku1 - (-luku2) joka on matemaattisesti sama kuin luku1 + luku2

Koodi

<HTML>
<HEAD>
<TITLE>js-malli3</TITLE>
<SCRIPT TYPE="text/javascript">

//tarkistusfunktio
function onkoLuku()
   {
   if (isNaN(document.lomake.luku1.value) || document.lomake.luku1.value == "")
                window.alert("Anna luku1");
   else
         {
         if (isNaN(document.lomake.luku2.value) || document.lomake.luku2.value == "")
               window.alert("Anna luku2");
         else
//Nämä kaksi riviä tulee kirjoittaa samalla riville, jos selain rivittää ne.
               document.lomake.tulos.value = document.lomake.luku1.value -(-document.lomake.luku2.value);
         }
    }
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="lomake">
Luku1: <INPUT TYPE="text" NAME="luku1"><BR>
Luku2: <INPUT TYPE="text" NAME="luku2"><BR>
Tulos: <INPUT TYPE="text" NAME="tulos"><BR>
<INPUT TYPE="button" VALUE="Laske" onClick="onkoLuku();"><BR>
<INPUT TYPE="reset" VALUE="Tyhjennä">
</FORM>
</BODY>
</HTML>

Sivu uudessa selainikkunassa