checkForm

Knižnica na automatickú kontrolu obsahu formulárových políčok.

ako to funguje?

CheckForm som sa snažil urobiť tak, aby bolo jeho použitie čo najjednoduchšie. V podstate stačí do hlavičky prilinkovať check_form.js a knižnicu dom.js a hotovo. Skript sa automaticky zinicializuje, prejde všetky formulárové políčka, zistí si (na základe ich triedy) či ich má kontrolovať alebo nie a zavesí sa na všetky akcie, ktoré by ho mohli zaujímať (zmena obsahu políčka, odosielanie formulára a pod.). Dokonca aj popis políčka v chybových hláškach sa snaží zistiť sám bez pomoci.

ako sa to používa

CheckForm vyžaduje k svojej práci dve knižnice: check_form.js a dom.js. Stiahni si ich a prilinkuj v hlavičke dokumentu.

<script type="text/javascript" src="dom.js"></script>
<script type="text/javascript" src="check_form.js"></script>

Pokiaľ chceš zvýrazňovať povinné alebo zle vyplnené políčka, môžeš na to použiť CSS (viď. definícia použitá v tejto ukážke). Povinné políčka majú triedu required a nesprávne vyplnené políčka majú triedu invalid (názvy týchto tried si môžeš zmeniť v konfigurácii knižnice, viď. zdrojový kód).

No a potom už stačí priradiť jednotlivým formulárovým políčkam príslušné triedy, ktoré checkForm-u povedia, či a ako ich má kontrolovať. Napríklad ak chcem aby políčko bolo povinné (t.j. užívateľ doňho musí vyplniť nejaký obsah), urobím to takto:

<input type="text" class="required">

Samozrejme môžem tried použiť viac a tak ich kombinovať. Takže ak napíklad chcem, aby políčko bolo povinné a mohlo obsahovať iba validnú URL adresu, zapíšem to takto:

<input type="text" class="required url">

podporované typy políčok

Skript podporuje formulárové políčka typu INPUT (text, password), TEXTAREA a SELECT.

Môžeš používať tieto triedy:

trieda	popis
required	povinné políčko, musí obsahovať nejaký obsah (t.j. aspoň jeden znak, ktorý nie je whitespace ako napr. medzera, zalomenie riadku či tabelátor)
numbers	číselná hodnota
safeChars	bezpečné znaky (veľké a malé písmená abecedy, čísla a podtržítko)
date	dátum vo formáte (D)D.(M)M.YYYY (pozor, kontrola nie je nijak inteligentná, nekontroluje sa počet dní v mesiaci ani nič podobné)
url	validná URL adresa
email	validná e-mailová adresa

Ďalšie triedy je samozrejme možné pridať pomocou funkcie checkForm.addFieldType(className, rule);, pričom className je reťazec s názvom triedy a rule je reťazec povolených znakov, regulárny výraz alebo funkcia (lepšiu dokumentáciu snáď dopíšem niekedy v budúcnosti).

chybové hlášky

Pri pokuse o odoslanie nesprávne vyplneného formulára checkForm zobrazí chybovú hlášku (alert) so zoznamom políčok ktoré treba opraviť a zruší odoslanie formulára. Popis políčok v chybovej hláške sa generuje takto:

ak je políčku skriptom priradená vlastnosť checkFormErrorMsg, zobrazí sa jej obsah
ak nie, zobrazí sa title políčka
ak je k políčku priradený nejaký label, zobrazí sa jeho obsah (pozor, toto nefunguje v Opere a Safari)
ak má políčko nejaké id, zobrazí sa jeho hodnota
a ak nezafunguje ani to, zobrazí sa name políčka

praktická ukážka

testovacie políčko s labelom:
safeChars:
numbers:
date in form (D)D.(M)M.YYYY:
URL:
e-mail:
required field:
simple select:
multiple select:

Súbory na stiahnutie

Názov	Typ	Veľkosť
check_form.css	súbor	99 B
check_form.js	JavaScript	10.1 KB
required.gif	obrázok GIF	121 B

Späť na zoznam skriptov