Sokszor felmerül a kérdés, hogy lehet a form mezőinek kitöltöttségét egyszerűen és újrahasznosíthatóan megírni.
Erre egy nagyon jó megoldást ad a jQuery JavaScript könyvtár.
A lényeg az, hogy egy kód megírásával lehessen ellenőrizni az oldalon található összes form kötelező mezőinek kitöltöttségét, függetlenül attól, hogy mely formnak hány kötelező mezője van.
Ehez fontos, hogy a form-okat a megfelőle stratégia szerint építsük fel…a lényeg a helyes osztályok használata. Ha a megfelelő input mezőket a megfelelő osztályokba soroljuk, akkor a megoldás néhány sor JS-el megoldható, és el lehet sütni akármikor a jövőben is.
Néhány napja az egyik ügyfelünknek kellett elkészítenem egy site részletet, ahol az oldalak összességét tekintve, kb. 20 formot kellett elhelyezni, namost ez sok, és ha mindet a szabványos JS módszerekkel próbáltam volna ellenőrizni (a mezőket ID alapján lekérdezem és ellenőrzöm, hogy ki van-e töltve), akkor sok kódot kellett volna írni, valamint a hibalehetőség is nagy. Ahol nagy a hibalehetőség azt minimum tízszer annyi idő tesztelni, mint egy megfelően elkészített form ellenőrzést.
Vegyünk egy egyszerű példát egy négy mezőböl álló form-ra, melynek három kötelező mezője, amiből az egyik email, tehát az email cím valósságát is ellenőrizni kell.
A form a következő képp néz ki:
-
<div class="form">
-
-
Ide jöhet a form bevezető szövege
-
<form class="feliratkozo-form" action="#" method="post">
-
<div style="display: block; width: 70%; margin: 0 auto;">
-
<div class="form-row" style="clear: left;">
-
<label style="float: left; clear: left;" for="lastname">Vezetéknév</label>
-
<input id="lastname" class="register-input-narrow kotelezo" name="mssys_lastname" type="text" /></div>
-
<div class="form-row" style="clear: left;">
-
<label style="float: left; clear: left;" for="firstname">Keresztnév</label>
-
<input id="firstname" class="register-input-narrow kotelezo" name="mssys_firstname" type="text" /></div>
-
<div class="form-row" style="clear: left;">
-
<label style="float: left; clear: left;" for="email">Email cím</label>
-
<input id="email" class="register-input-narrow kotelezo email" name="email" type="text" /></div>
-
<div class="form-row" style="clear: left;">
-
<label style="float: left; clear: left;" for="honnan">Honnan hallottál rólunk?</label>
-
<input id="honnan" class="register-input-narrow" name="honnan" type="text" /></div>
-
</div>
-
<input class="desc" type="submit" value="Kérem a tanulmányt!" />
-
</form>
-
-
Ide is jöhet valamilyen szöveg, mondjuk arról, hogy nem adjuk az email címed másnak
-
</div>
Menjünk szépen végig a kódon mikre kell figyelni, mik a lényeges részletek!
Nyilván nem a CSS-en van a lényeg, az csak az elrendezés miatt van.
Ha megnézzük az egész form egy div-be helyezkedik el, és osztályba van sorolva. Ez nem véletlen. A későbbiekben ezen div adott osztályain fogunk végigmenni, és ellenőrizni a kitöltöttség helyességét. Azért nem a form-on, mert a mezők a div-hez tartoznak, nem pedig a form-hoz, tehát a formon belül nem tudunk osztályokat keresni.
A felépítést tekintve megfigyelhetjük, hogy a mezőknek van id paraméterük és egy label követi. Ez fontos és sokan elfelejtik. Egy modert formban a mező címére kattintva is a mező válik aktívvá, ez különösen pl. a checkbox-oknál igaz. Gondoljunk bele, milyen rosz megoldás ha van egy checkbox mellette egy sor szöveg, és csak akkor válik kiválaszottá a checkbox ha a kis négyzetébe kattintuk, ha a szövegre akkor nem történik semmi. Erre teljesen tökéletes a mező id és a label for párosítás.
A három kötelező mező a Vezetéknév, Keresztnév, és Email cím. Ezeket a kotelezo osztályba soroljuk. Megfigyelhetjük az Email cím mellett ott van az email oszály tag is. Itt megjegyezném, hogy ha egy HTML elemet szóközökkel elválasztva osztályokba sorolunk az azt jeleni, hogy az összes adott osztályba tartozik. Tehát például az Email cím az egyszerre tartozik a register-input-narrow, a kotelezo és az email osztályokba.
Nézzük meg a hozzá tartozó jQuery kódot:
-
<script type="text/javascript">
-
$(document).ready(function() {
-
$('.feliratkozo-form').submit(function() {
-
var mehet = true;
-
$('input.kotelezo', $(this).parent()).each(function() {
-
if ($(this).val() == '') {
-
mehet = false;
-
}
-
});
-
-
if (mehet) {
-
var x = $('input.email', $(this).parent()).val();
-
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
-
if (!filter.test(x)) {
-
alert('Nem valós az e-mail cím');
-
return false;
-
}
-
return true;
-
} else {
-
alert('Minden mező kitöltése kötelező!') ;
-
return false;
-
}
-
});
-
});
-
</script>
Láthatjuk, hogy az oldal betoltődésekor fut le a kód. Végigmegyünk az összes feliratkozo-form osztályon és lekezeljük a submit eseményét. Ebbe az osztályba soroltuk be az oldalon talalhátaó összes ellenőrizendő form-ot.
Eztán végigmegyünk az összes olyan input mezőn amit a kotelezo osztalyba soroltunk, és a form szülő objektumába tartozik. Ez az objektum az a div amibe elhelyzetük a form-ot.
Ha valami nincs kitöltve akkor a mehet változót hamis értékre állítjuk.
Ha a mehet változó értéke nem igaz, akkor alert ablakban informáljuk a felhasználót a hiba okáról és hamis értékkel térünk vissza a ciklusból, tehát nem fog lefutni a submit esemény. Ha igaz akkor folytatjuk a további szükséges ellenörzéseket. ez jelen esetben az email cím helyessége.
Miután minden szükséges ellenőrzést megtettünk az adatok függvényében fut le a submit esemény, az oldalon elhelyezett akárhány form esetén.
Előnye hogy pár sor, nem függ a form mezőinek számától és lényegesen lerövidül a tesztelés időtartalma. Az osztályokkal való mezőellenőrzés ha működik egy form-ra akkor működik a többire is, ha nem működik akkor semmelyiknél se fog.
Természetesen olyan ellenőrzésekre is szükség lehet mint például hogy egy legördülő select-ből mindenképpen válasszon az felhasználó egyet, de azt is hasonlóképpen bele lehet vinni a kódba.
