• címkék:
  • validator
  • ellenőrzés
  • űrlap
  • check
  • form

Utopic Farm Form Validator

1. példa - Szöveg és E-mail ellenőrzés

Az első példában a "Név" mezőnél minimum 3 karaktert követelünk meg, továbbá kötelező az E-mail cím megadása, illetve "Üzenet"-nek tetszőleges, minimum 1 karakter hosszú sztringet várunk. A telefonszám megadása nem követelmény, de ha mégis megadjuk, akkor mindkét mezőt (körzetszám + telefonszám) ki kell töltenünk. Ehhez mindkét input mezőnél a .req-both osztályt meg kell adnunk, illetve a rel attribútummal "összekapcsolni" őket (rel="phone").

Név:
Telefon
E-mail
Üzenet

Deklaráció

A deklarációt csak az első példánál mutatom be, mindegyik űrlapnál ugyanezek a beállítások, csak a változó értékeket (az elküld gomb, az űrlap, illetve a hibaüzenet-blokk azonosítóját) kell minden esetben módosítani.

HTML kód

2. példa - Egyező mezők vizsgálata

Alábbi űrlap azt szemlélteti, miként lehet több mezőt összekötni: csak az összetartozó mezők egyező tartalma esetén elfogadott az űrlap.
Ehhez a .req-same osztályt rendeljük az input mezőkhöz, majd az összetartozó mezőket szintén az előző példához hasonlóan a rel attribútummal kötjük össze.

User név
User név (ismét)
Jelszó
Jelszó (ismét)

HTML kód

3. példa - Hibaüzenet

Dátum (éééé.hh.nn)
Életkor
E-Mail
E-Mail (ismét)

Alaphelyzetben a hibaüzenet az ablak tetején, középen jelenne meg, amelyhez kénytelenek lennénk az oldal tetejére scroll-ozni.
Hogy mégse kelljen, az egész form-ot egy relatív pozícionálású .formContainer blokkba ágyaztam, illetve a hibaüzenet blokkját ennek megfelelően átpozícionáltam:

Módosított CSS kód

Mivel a plugin nem magyar fejlesztésű, így nem meglepő, hogy a dátum validáció sem ennek megfelelő formátumú. Alaphelyzetben a dátumot (legalábbis a fejlesztő szerint) nn.hh.éééé formátumúként validálja, de természetesen a .js kód módosításával tetszőleges formára hozhatjuk.
A .js kódban keressük meg az alábbi sort:

Nos, ha jobban megnézzük ezt a sort, látszik, hogy hibás a plugin, ugyanis ez nem nn.hh.éééé, hanem hh.nn.éééé formátumúként validál!
Mivel azonban mi amúgy sem így használnánk, nincs nagy jelentősége...
A kódot módosítsuk eképpen:

HTML kód

Ahhoz, hogy hibaüzenetet jeleníthessünk meg, az #errorDiv3 blokkot .error-div-alternative osztállyal kell, hogy bővítsük:

4. példa - Kombinált követelmények

Lehetőség van az opciókat kombinálni is, pl. az alábbi űrlapon kötelező a telefonszám megadása, mindkét értéknek meg van szabva a minimális karakterszáma, illetve mindegyik csak numerikus lehet:

Név:
Telefon
E-mail
Üzenet

HTML kód

« bezár