From mező ellenőrzés DHTML-el és jQuery JavaScript könyvtárral
Régebben írtam egy cikket a dinamikus form ellenőrzésről, és arra gondoltam leírom az eljárás modernebb változatát, azaz a hibaüzenetek nem alert ablakban jelennek meg, hanem DHTML segítségével.
Természetesen olyan kódot kell készíteni amely akárhány form-ra dinamikusan működik, tehát nem függ az input mezők számától, és az oldalon elhelyezett form-ok mennyiségétől.
A megoldást itt is a jQuery JavaScript könyvtár adja.
De mindenek előtt érdemes átnézni hogyan is kell felépíteni egy profi form-ot. Khauth György kollegám írt már erről néhány nagyon hasznos cikket:
- Regisztrációs űrlap tervezési minták
- Felhasználóbarát form kitöltés és ellenőrzés
- Ergonómikus formok készítésének irányelvei
Miután az alapelvek tanulmányozásával végeztünk készítsük el a form-ot:
-
<style type="text/css">
-
.form-row {
-
padding-bottom: 10px;
-
width: 290px;
-
}
-
-
.form-row label {
-
float: left;
-
width: 100px;
-
padding-right: 10px;
-
}
-
-
.form-row input {
-
float: left;
-
padding: 3px;
-
width: 160px;
-
}
-
-
.clear {
-
clear: both;
-
}
-
-
.form-error {
-
text-align: center;
-
color: #C52020;
-
border: 1px solid #DD7777;
-
background: #FFCCCC;
-
margin: 10px 0;
-
display: none;
-
}
-
</style>
-
-
<div style="margin: 0 auto; width: 300px;">
-
<form action="#" method="post">
-
<div class="form-row">
-
<label for="keresztnev">Keresztnév:</label><input type="text" name="keresztnev" class="kotelezo" id="keresztnev" />
-
<div class="clear"></div>
-
<div class="form-error hianyos">A keresztnév megadása kötelező!</div>
-
</div>
-
-
<div class="form-row">
-
<label for="vezeteknev">Vezetéknév:</label><input type="text" name="vezeteknev" class="kotelezo" id="vezeteknev" />
-
<div class="clear"></div>
-
<div class="form-error hianyos">A vezetéknév megadása kötelező!</div>
-
</div>
-
-
<div class="form-row">
-
<label for="email">Email:</label><input type="text" name="email" class="kotelezo email" id="email" />
-
<div class="clear"></div>
-
<div class="form-error hianyos">Az email cím megadása kötelező!</div>
-
<div class="form-error hibas">Nem valós az email cím!</div>
-
</div>
-
-
<div class="form-row" style="text-align: center;">
-
<input type="submit" name="submit" value="Mehet" style="float: none;" />
-
</div>
-
</form>
-
</div>
Ha megnézzük a kód a css stílus felépítésével kezdődik, ez gyakorlatilag csak az átlátható kinézetet kezeli. A lényeg természetesen a form, és a form-on belüli osztályok elhelyezkedése!
A form-ot körülöleli egy div, a JavaScript kóddal ezen belül fogunk keresni. Ennek az a lényege, hogy akárhány form-on el tudjuk sütni az eljárást, ne kelljen minden form-nál újra és újra megírni, hozzáigazítani a form-hoz.
Három adatok kérünk be: keresztnév, vezetéknév, és email cím.
Ha megfigyeljük mindegyik alatt megtalálható a hozzá tartozó hibaüzenet is. A hibaüzenetek mindegyike a form-error osztályba van sorolva, így a kinézetük egységesen definiálható, és láthatóságuk egységesen kezelhető.
A hibaüzenetek nem csak a form-error osztályba tartoznak, hanem a hiba típusába is. Ezesetben mind a három input mezőhöz tartozik egy hianyos osztály, ami akkor jelenik meg ha üresen hagytuk, az email címhez pedig egy hibas osztály, ami akkor jelenik meg ha az email cím nem valós.
Nézzük meg a hozzá tartozó JavaScript kódot, melyben dinamikusan elleőrizzük az input mezők kitöltöttségét, és az email cím helyességét, valósságát is:
-
<script type="text/javascript">
-
-
$(function() {
-
$('form').submit(function() {
-
var mehet = true;
-
var first_error = true;
-
var error_obj = null;
-
$('div.form-error', $(this).parent()).each(function() {
-
$(this).hide();
-
});
-
$('input.kotelezo', $(this).parent()).each(function() {
-
if ($(this).val() == '') {
-
mehet = false;
-
if (first_error) {
-
first_error = false;
-
error_obj = $(this);
-
}
-
$('div.hianyos', $(this).parent()).show();
-
}
-
});
-
-
var email = $('input.email', $(this).parent()).val();
-
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
-
if (!filter.test(email)) {
-
mehet = false;
-
if (first_error) {
-
first_error = false;
-
error_obj = $(this);
-
}
-
$('div.hibas', $(this).parent()).show();
-
}
-
-
if (mehet) {
-
return true;
-
} else {
-
location = '#' + error_obj.attr('id');
-
return false;
-
}
-
});
-
});
-
-
</script>
A dinamikus form ellenőrzésről írt cikkemhez képes van néhány eltérés, most ezekre térnék ki elsősorban.
Az első, hogy nem csak a mehet változót deklaráljuk, hanem a first_error bool típusút, és az error_obj html objektum típusút is. Ezek azt a célt szolgálják, hogy hibás kitöltés esetén le tudjuk tárolni melyik hiba volt az első a sorban, és automtaikusan oda ugorjunk az oldalon.
Utána láthatjuk a
-
$('div.form-error', $(this).parent()).each(function() {
-
$(this).hide();
-
});
részt, ami arra való, ha már egyszer hibásan töltöttük ki a form-ot, akkor eltűntetjük az összes hibaüzenetet, különben ottmaradhat második hibás kitöltés esetén olyan üzenet is, ami már nem aktuális.
Ezután ellenőrizzük a kitöltöttséget, tehát végigmegyünk a kötelező input mezőkön. Ha valameny nincs kitöltve akkor a szülö objektumának hianyos osztályát megjelenítjük. Végül ellenőrizzük az email cím helyességét, tehát hogy illeszkedik-e a szabványra, és ha nem a szülő html objektumának hibas osztályát megjelenítjük.
Végül ha nem találtunk hibát tobábbengedjük a submit eseményt, ha találtunk akkor az első hibás mezőhöz ugrunk.
hosszu.kalman Reply:
September 9th, 2008 at 6:15 pm
Szia!
jQuery - Learning JQuery
Drupal 5 - Pro Drupal Development
Drupal 6 - Learning Drupal 6 Module Development
PHP - SitePoint The PHP Anthology Volume I-II
De amúgy a leghatékonyabb, hogyha van egy adott kód amit átalakítasz a saját ötleted alapján. Abból nagyon sokat lehet tanulni. Nézegetni az API-kat és kihozni belőle egy új dolgot.
De ezek a könyvek (PDF-ek) kiindulópontnak nagyon jók.
Magyar nyelvű irodalom a témákban nem sok van, csak PHP. Kezdésnek: A PHP, a MySQL és az Apache használata utána pedig jöhet a PHP fejlesztés felsőfokon.
De mondom, szeirntem alakíts át kódokat abból lehet sokat tanulni.
[Reply]