Ûrlapokkal gyakran találkozunk az Interneten. Sok oldal ettõl nyeri az interaktivitását. Segítségükkel a felhasználók elküldhetik véleményüket egy oldalról, feliratkozhatnak egy játék résztvevõi közé, megrendelhetnek különféle tárgyakat, programokat, szolgáltatásokat a világhálón keresztül, kereséseket hajthatnak végre speciális keresõszervereken.
Az ûrlapokat kitöltésük után legtöbbször elküldjük a hálózaton keresztül egy szerveren lévõ CGI programnak, amely feldolgozza a benne lévõ adatokat. Problémát jelenthet viszont az, ha az ûrlapunk hibás adatot tartalmaz. Mivel járhat ez? Elküldjük a hibás adatot a hálózaton keresztül, ezzel gyakorlatilag feleslegesen növelve a hálózati forgalmat. Ugyanakkor a szerveren lévõ program sem tud mit kezdeni az adatunkkal, jobb esetben visszaküld egy hibaüzenetet, ami tájékoztatja a felhasználót, hogy hol rontotta el az ûrlap kitöltését. Ezután kezdõdhet az egész eljárás elölrõl. Ez a folyamat sok-sok másodpercet vehet igénybe, igen lassú is lehet.
A JavaScript itt is segíthet nekünk. Még a kitöltés fázisában, az ûrlap tényleges elküldése elõtt ellenõrizhetjük, hogy helyes-e a kitöltés. Ha nem, akkor nem is engedjük meg az ûrlap elküldését. Ezzel nem okozunk forgalomnövekedést a hálózaton, valamint a hibaüzenetek is rögtön megjelennek a képernyõnkön, hiszen azt nem a szerveren futó program küldi vissza, hanem a gépünkön futó JavaScript program.
Általában két helyen szokás az ellenõrzést elvégezni. Minden egyes ûrlapelemnél, amint a felhasználó kitölti azt, az onChange, illetve elküldéskor az onSubmit eseménykezelõ segítségével. A következõkben több példát is látunk, amelyekben valamilyen adat ellenõrzését végezzük el.
Leggyakrabban azt ellenõrizzük le, hogy ne legyen üres mezõ az ûrlapban. Lássunk erre egy rövid példát! Kattintsunk az "Ellenõrizd" gombon elõbb úgy, hogy üresen hagyjuk a mezõt, majd úgy is, hogy beírunk valamit!
A programunk kódja a következõ:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function uresCheck(mezo){
if (mezo.value != "") return true;
else{
alert("Üres mezõ!");
return false;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>
<FORM NAME="form_ures">
<INPUT TYPE="text" NAME="ures" SIZE="20">
<INPUT TYPE="button" VALUE="Ellenõrizd"
onClick="uresCheck(form_ures.ures)">
</FORM>
</BODY>
</HTML>
Ha kattintunk a gombon, meghívjuk az uresCheck() nevû függvényt. Paraméterként a leellenõrizendõ ûrlapmezõt adjuk át. A függvény nem csinál mást, csak megnézi, hogy a mezõ értéke mivel egyenlõ, ugyanis ha az nem egyenlõ az üres sztringgel (""), akkor kitöltöttük. Ebben az esetben true, ellenkezõ esetben false értékkel tér vissza.
Szintén fontos lehet egy e-mail cím leellenõrzése. Természetesen csak a cím formai helyességét tudjuk vizsgálni. Minden e-mail címben szerepel "@" karakter, illetve ezen karakter elõtt és után további karakterek.
Ismét tekintsük meg a programot!
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function emailCheck(mezo){
szoveg = mezo.value;
if (!(szoveg.indexOf('@')>0 && szoveg.indexOf('@')<szoveg.length-1)){
alert("Rossz e-mail cím!");
return false;
}
else{
alert("Formailag helyes e-mail cím!");
return true;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>
<FORM NAME="form_email">
<INPUT TYPE="text" NAME="email" SIZE="20">
<INPUT TYPE="button" VALUE="Ellenõrizd"
onClick="emailCheck(form_email.email)">
</FORM>
</BODY>
</HTML>
Az emailCheck() nevû függvény végzi az ellenõrzést. Paraméternek ez a függvény is a vizsgált ûrlapmezõt várja, mely értékét beteszi a szoveg nevû változóba. Az szoveg.indexOf('@') függvénnyel lekérdezzük a '@' helyét. Ha ez nagyobb, mint 0 (azaz nem az elsõ karakter) és kisebb, mint szoveg.length-1 (azaz nem az utolsó karakter), akkor egy formailag helyes e-mail címet írtunk be. Ezt még negáljuk, hiszen elsõsorban arra vagyunk kíváncsiak, hogy mikor nem jó a cím.
Ebben a szakaszban megnézzük, hogyan lehet megvizsgálni azt, hogy egy ûrlapmezõ milyen karaktereket tartalmaz. Az elsõ példában azok a kitöltések lesznek helyesek, amelyek csak pozitív egész számokat tartalmaznak.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function uresCheck(mezo){
if (mezo.value != "") return true;
else{
alert("Üres mezõ!");
return false;
}
}
function teszt(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) == -1)
return false;
return true;
}
function numerikusCheck(mezo){
if (!uresCheck(mezo)) return false;
if (!teszt(mezo.value,"1234567890")){
alert("Ez nem numerikus érték!");
return false;
}
else{
alert("Ez helyes érték!");
return true;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>
<FORM NAME="form_numerikus">
<INPUT TYPE="text" NAME="numerikus" SIZE="20">
<INPUT TYPE="button" VALUE="Ellenõrizd"
onClick="numerikusCheck(form_numerikus.numerikus)">
</FORM>
</BODY>
</HTML>
Az ellenõrzést a numerikusCheck() függvény végzi. Paramétere a vizsgált ûrlapmezõ. A függvény elõször meghívja a már korábban bemutatott uresCheck() függvényt. Ha ez hamis értéket ad vissza (azaz üres volt a mezõnk), akkor az
if (!uresCheck(mezo)) return false;
utasítás igaz lesz, és a függvény hamis értékkel tér vissza. Ellenkezõ esetben egy feltételes elágazás következik. Itt kap szerepet a teszt() függvény. Ez a függvény azt teszteli, hogy a paraméterként átadott adat minden karaktere szerepel-e a szintén paraméterként átadott minta sztringben. A vizsgálat egy for ciklussal történik, amely az adat összes betûjére lefut, közben azt vizsgáljuk, hogy az aktuális betût tartalmazza-e a minta.
if (minta.indexOf(adat.charAt(i)) == -1) return false;
Az adat.charAt(i) az adat sztring i-edik karakterét adja vissza. Az indexOf() függvény pedig megadja, hogy ez a karakter hányadik a mintában. Ha nem szerepel benne, akkor -1 értéket ad. Ekkor a feltétel igaz lesz, és a teszt() függvény hamis értékkel tér vissza. Mivel a minta sztring példánkban csak számokat tartalmazott ("1234567890"), ezért a teszt függvény hamis értéket ad minden olyan adatra, amely nem pozitív egész szám. Ekkor a
if (!teszt(mezo.value,"1234567890")){...}
feltétel igaz lesz, és a numerikusCheck() függvény hibaüzenetet jelenít meg, és hamis értéket ad vissza.
A teszt() függvény jól használható olyan sztringek ellenõrzésére, amelyek csak meghatározott karaktereket tartalmaznak. Tegyük fel, hogy a következõ mezõbe egy telefonszámot kell írni. Ez több módon is megadható. Szerepelhetnek benne szóközök, kötõjelek, zárójelek (), számok 0-tól 9-ig és / jel, a mellék megadásához. Az alábbi megadások például mind helyesek:
123 456 123-456 (1)123-456 (1)123-456 /123
A program a következõ:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function uresCheck(mezo){
if (mezo.value != "") return true;
else{
alert("Üres mezõ!");
return false;
}
}
function teszt(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) == -1)
return false;
return true;
}
function tartalmaz(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) != -1)
return true;
return false;
}
function telefonCheck(mezo){
if (!uresCheck(mezo)) return false;
if (!teszt(mezo.value,"1234567890()/- ") ||
!tartalmaz(mezo.value,"1234567890")){
alert("Ez nem jó telefonszám!");
return false;
}
else{
alert("Ez helyes telefonszámnak tûnik!");
return true;
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>
<FORM NAME="form_telefon">
<INPUT TYPE="text" NAME="telefon" SIZE="20">
<INPUT TYPE="button" VALUE="Ellenõrizd"
onClick="telefonCheck(form_telefon.telefon)">
</FORM>
</BODY>
</HTML>
Az egyetlen újdonság a tartalmaz() függvény, ami a teszt() egy változataként fogható fel. Hasonló a felépítése is, de ez a függvény akkor ad hamis értéket, ha a paraméterként átadott adat egyetlen karaktere sincs benne a minta sztringben. Ez alapján az ellenõrzést végzõ telefonCheck() úgy mûködik, hogy az uresCheck() függvénnyel ellenõrizzük, nem üres-e az ûrlapmezõnk, majd a
if (!teszt(mezo.value,"1234567890()/- ") || !tartalmaz(mezo.value,"1234567890"))
feltétel akkor lesz igaz, ha vagy a teszt(), vagy a tartalmaz() függvény hamis értéket ad vissza. Ekkor rossz telefonszámot írtunk be, amire hibaüzenet figyelmeztet bennünket és a függvény hamis értéket ad vissza.
Az ûrlapmezõknek (sõt a kereteknek is) létezik egy olyan focus() nevû metódusa, ami ráállítja a fókuszt az adott elemre. Segítségével meghatározható, hogy az oldal betöltése után mely mezõ legyen aktív (a <BODY> HTML elemben az onLoad eseménykezelõ segítségével), de hasznos lehet akkor is, ha hiba esetén a rosszul kitöltött mezõt tesszük aktívvá, és így a felhasználó könnyebben javíthatja azt. Ezen kívül a szövegmezõknek létezik egy select() metódusa is, amely kijelöli annak tartalmát. A következõ példa ezek használatát mutatja be.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
var aktualis = 0;
function fokusz_allitas(){
if (aktualis == 0){
document.select_form.text1.focus();
document.select_form.text1.select();
}
else{
document.select_form.text2.focus();
document.select_form.text2.select();
}
aktualis = 1 - aktualis;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="select_form">
<INPUT TYPE="text" NAME="text1" VALUE="Az elsõ mezõ" SIZE="15"><BR>
<INPUT TYPE="text" NAME="text2" VALUE="A második mezõ" SIZE="15"><BR>
<INPUT TYPE="button" VALUE="Fókuszállítás" onClick="fokusz_allitas()">
</FORM>
</BODY>
</HTML>
A fokusz_allitas() függvény végzi a fókuszálást illetve a mezõ tartalmának kijelölését. Ezt az aktulis nevû változó alapján teszi. Ha ez 0, akkor az elsõ mezõt, ha 1, akkor a második mezõt teszi aktuálissá.
A fejezet bevezetésében már volt szó a CGI programokról, amelyek a szerveren futva képesek feldolgozni az ûrlapjainkat és rögtön válaszolni nekünk. Azonban nem mindenki rendelkezik olyan lehetõséggel, hogy egy szerver gépen CGI programot futtathasson. Nekik jól jöhet az a lehetõség, hogy egy ûrlap tartalma levélben is elküldhetõ. Persze ekkor a feldolgozás nem lesz automatikus, de olyan esetekben, ahol nem fontos a gyors válasz küldése, ott tökéletesen megfelel.
Valójában ez nem igényel egyetlen JavaScript utasítást sem, hanem tisztán megoldható HTML segítségével (IE 3.0 a tapasztalatok szerint nem támogatja).
<FORM METHOD="post" ACTION="mailto:e-mail@cim" ENCTYPE="text/plain"> ... Itt az ûrlap mezõinek definiálása következik ... </FORM>
Látható, hogy az ACTION attribútumnál nem egy szerver címét adtuk meg, hanem e-mail címet. Erre a címre küldjük ki az ûrlap tartalmát. Az ENCTYPE attribútumnak a "text/plain" értéket adtuk, mert ebben az esetben kódolatlanul, olvasható formában továbbítódik a tartalom.
Végül egy összetettebb példán nézzük át a tanultakat. Használjuk fel a korábban bemutatott ellenõrzõ függvényeket! Ha rosszul töltöttük ki az ûrlapot és úgy kattintunk az elküld gombra, akkor figyelmeztetõ hibaüzenetet kapunk. Az ûrlapot az általunk megadott címre küldjük el, amit az utolsó mezõben adhatunk meg.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- A JavaScript kód elrejtése
function uresCheck(mezo){
if (mezo.value != "") return true;
else{
alert("A(z) "+ mezo.name +" mezõ üres!");
return false;
}
}
function emailCheck(mezo){
var szoveg = mezo.value;
if (!(szoveg.indexOf('@')>0 && szoveg.indexOf('@')<szoveg.length-1)){
alert("Rossz e-mail cím!");
return false;
}
else return true;
}
function teszt(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) == -1)
return false;
return true;
}
function numerikusCheck(mezo){
if (!uresCheck(mezo)) return false;
if (!teszt(mezo.value,"1234567890")){
alert("Ez nem numerikus érték!");
return false;
}
else return true;
}
function tartalmaz(adat,minta){
for (var i=0; i<adat.length; i++)
if (minta.indexOf(adat.charAt(i)) != -1)
return true;
return false;
}
function telefonCheck(mezo){
if (!uresCheck(mezo)) return false;
if (!teszt(mezo.value,"1234567890()/- ") ||
!tartalmaz(mezo.value,"1234567890")){
alert("Ez nem jó telefonszám!");
return false;
}
else return true;
}
function ellenoriz(){
if (uresCheck(document.form.nev) &&
numerikusCheck(document.form.ev) &&
telefonCheck(document.form.telefon) &&
emailCheck(document.form.email)){
document.form.action = "mailto:"+document.form.email.value;
return true;
}
else return false;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form" ACTION="dummy" ENCTYPE="text/plain"
onSubmit="return ellenoriz()">
Neved?<BR><INPUT TYPE="text" NAME="nev" SIZE="20">
<P>Hany eves vagy?
<BR><INPUT TYPE="text" NAME="ev" SIZE="20">
<P>Telefonszám ellenõrzése:
<BR><INPUT TYPE="text" NAME="telefon" SIZE="20">
<P>Az urlap a kovetkezo e-mail cimre lesz elkuldve...
<BR><INPUT TYPE="text" NAME="email" SIZE="20">
<P><INPUT TYPE="submit" NAME="submit" VALUE="Elküld">
</FORM>
</BODY>
</HTML>
A programban feltûnik több ismerõs, ellenõrzéssel kapcsolatos függvény is. Ezeket picit módosítottam. Már nem írják ki, ha egy mezõ helyesen lett kitöltve, hiszen arra nincs szükségünk, valamint az uresCheck() függvény változott abban, hogy a hibaüzenetben kiírja annak a mezõnek a nevét, amely üresen maradt az ûrlapelemek name attribútumának felhasználásával.
Vegyük észre, hogy a <FORM> HTML elemen belül az onSubmit eseménykezelõ meghívja az ellenoriz() nevû függvényt.
<FORM NAME="form" ....... onSubmit="return ellenoriz()">
A Submit esemény akkor lép fel, amikor elküldjük az ûrlapot. Az ellenoriz() függvény igaz értéket ad vissza, ha az ellenõrzést elvégzõ függvények igaz értéket adnak vissza minden egyes mezõre. Csak ebben az esetben történik meg a küldés. Az ellenoriz() függvény állítja be az ACTION attribútumot is a form.email mezõ tartalma alapján. Az ûrlap tartalmát erre a címre küldjük el.
document.form.action = "mailto:"+document.form.email.value;