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:
.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;
}
