jQuery plugins - ufvalidator
szept 03

ufvalidator

Űrlap ellenőrzés

Verzió: 1.0.4
Kiadás dátuma: 2010
Fejlesztő: Tolga Arican
Liszensz: nincs adat

Bevezető

Az ufvalidator segítségével ellenőrizhetjük, hogy egy űrlapon megadott adatok formailag helyesek-e, vagy sem. Lehetőség van az egyes beviteli mezőket csoportosítani, illetve működés szempontjából össze is köthetjük őket (pl. regisztrációs űrlapoknál a jelszó megadásánál kétszer kérhetjük be a jelszót és azokat összevethetjük egymással).

Implementálás

CSS

            <link type="text/css" rel="stylesheet" href="styles.css" media="screen" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.ufvalidator-1.0.4.js"></script>
          

Deklaráció

Deklaráció során meg kell adnunk, hogy mely submit gombhoz rendeljük a plugin-t, illetve az űrlap azonosítójára is szükség van. Ha hibaüzenetet szeretnénk megjeleníteni, akkor a kívánt blokk azonosítóját is megadhatjuk (a további paramétereket lásd lejjebb).

            $(document).ready(function() {
              $('#submitBtn').formValidator({
                scope: '#formName',
                errorDiv: '#errorDiv',
              });
            });
          

Használat

Sajnos a plugin némely funkciójának helyes működéshez megköveteli, hogy milyen legyen az űrlap strukturális felépítése. Ez a forma sajnos nem a legszebb, tele van tűzdelve felesleges div blokkokkal. Természetesen ha más struktúrát szeretnénk használni, van rá mód, de akkor a .js kód megfelelő részeit módosítani kell.

Példa az űrlap felépítésére:

            <div class="form-row">
              <div class="label">Név:</div>
              <div class="input-container">
                <input name="user" type="text" class="input req-min" minlength="15" />
              </div>
            </div>
          

Mint látható a beviteli mezők címkéjét nem label tag-ként adjuk meg, hanem div blokk-ként, amelynek CSS osztálya lesz .label. Az egyes beviteli mezők szintén kapnak egy div blokk-ot konténerként, ezt az .input-container osztállyal kell definiálnunk. Az egyes funkciókat (ennek részletes listáját lásd lejjebb) a beviteli mező stílusaként kell definiálnunk.

CSS osztályok

Az alábbi CSS osztályok alkalmazásával tudjuk a validációt érvényesíteni a kívánt beviteli mezőre:

  • .req-string: tetszőleges sztring
  • .req-email: csak E-mail cím
  • .req-min: minimum X karakter (a karakterszámot - X - a minlength attribútummal kell definiálni)
  • .req-numeric: csak numerikus szám
  • .req-date: csak dátum (nn.hh.éééé)
  • .req-both: ellenőrzi az egy csoportba tartozó, a rel attribútummal összekötött mezőket, hogy mindegyik ki van-e töltve
  • .req-same: ellenőrzi az egy csoportba tartozó, a rel attribútummal összekötött mezőket, hogy mindegyiknek azonos-e a tartalma

Teljes paraméterlista

Sajnos a fejlesztő honlapján nem található részletes dokumentáció, pl. a használható paraméterekről egy szó sem esik. Így csak a .js turkálásával kiderített pár paramétert sorolnám fel - némelyiket ismertető nélkül:

  • onSuccess: függvény meghívása az űrlap sikeres elküldésekor (alapértelmezett: null)
  • onError: függvény meghívása az űrlap sikertelen elküldésekor (alapértelmezett: null)
  • scope: az űrlap azonosítója
  • errorClass: hiba esetén az input elemhez rendelt CSS osztály (alapértelmezett: 'error-input')
  • errorDiv: a hibaüzenet blokk CSS osztálya
  • errorMsg: az egyes hibaüzenetek személyre szabása (ennek lehetséges értékeit lásd lejjebb)
  • customErrMsg: ezzel a paraméterrel leválthatjuk az előző pont hibaüzeneteit és minden hibára az itt definiált üzenetet jeleníti meg
  • extraBoolMsg: nincs adat (alapértelmezett: 'Formu dikkatli kontrol edin!')
  • dateSeperator: a dátum mezőknél az év/hónap/nap közti elválasztó jel (alapértelmezett: '.')
  • extraBool: nincs adat

Tippek

  • FONTOS!
    Minden űrlaphoz kapcsolódó jQuery plugin csak kliens oldali ellenőrzést takar, ami ebből kifolyólag könnyedén kikerülhető, ha a böngészőben letiltjuk a szkript futtatást. Pontosan ezért soha ne hagyatkozzunk csak erre, szerver oldali ellenőrzés mindig legyen a háttérben!
  • A dátum validáló rész nem a magyar formátumnak (éééé.hh.nn) megfelelő, így azt át kell írni a forráskódban. Ezzel kapcsolatos részleteket a bemutató oldalon találsz.
  • Aki az eredeti formájában kívánja használni a dátum validációt, vegye számításba, hogy a plugin 1.0.4-es verziója kisebb hibát rejteget. Ezzel kapcsolatos részleteket szintén a bemutató oldalon találsz.