Form mező ellenőrzés jQuery segítségével

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>

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>

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.