Univerzální skript pro kontrolu formulářů

Pokud často píšete HTML formuláře, spojené se skripty na kontrolu správnosti zadávaných údajů, jistě víte, jak únavné je neustálé přepisování téměř shodných částí kódu, lišících se jen v maličkostech. Následující stručný, ale užitečný univerzání skript za vás dokáže udělat „nejhrubší práci“ při kontrole HTML formulářů automaticky.

Nejčastější kontrolou, prováděnou na formulářích, je bezesporu kontrola editačních polí (prvků TEXT). Tato pole se kontrolují jednak na nenulové zadání, tj. zda neobsahují prázdnou hodnotu, a dále, u číselných vstupů, na správnost zadání čísla na vstupu. Obě tyto kontroly provádí níže uvedený skript, s minimálním zadáváním parametrů ze strany formuláře. Vyzkoušejte neúplně vyplnit a odeslat následující formulář. Pole Jméno a Příjmení musí obsahovat neprázdný řetězec, pole Věk musí obsahovat číselný údaj:

Zde je HTML kód tohoto formuláře:

Formulář je poněkud „očesaný“ – chybí např. specifikace jeho cílení, což ovšem pro účely ukázky není podstatné. Důležité je volání kontrolní funkce Validate v handleru události onSubmit. Toto volání je provedeno standardním způsobem, tak jak se obvykle při kontrolních funkcích používá.

Než si ukážeme kód samotné funkce Validate, musíme se shodnout na konvenci předávání potřebných parametrů. Přímo je předáván jediný parametr – ukazatel na formulář, jenž se má kontrolovat, na čemž opět není nic neobvyklého. Musíme však (a to pro všechna kontrolovaná pole) ještě stanovit dva další parametry. Za prvé je to název pole, který se zobrazí v chybovém hlášení, a za druhé příznak, zda kontrolovat pole pouze na neprázdnost, či také na numerickou hodnotu. Protože jsem se v uvedeném skriptu chtěl vyhnout používání META tagů či různých „nedůležitých“ vlastností ovládacích prvků, jsou oba tyto parametry sloučeny do jednoho standardního: jména příslušného ovládacího prvku, tedy vlastnosti name. U polí, kontrolovaných pouze na neprázdnou hodnotu, je jméno prvku přímo jménem zobrazeným v chybovém hlášení, u numerických textových polí se před jméno prvku ještě přidává řetězec „num“ – viz jméno prvku numVek.

Zde je kód funkce Validate:

Funkce Validate prochází všechny ovládací pole formuláře, kontroluje z nich pouze pole typu text. Pokud první tři znaky jména textového pole obsahují řetězec „num“, funkce provádí kontrolu na neprázdnost pole i kontrolu na správnost zadání číselné hodnoty, je-li jméno prvku bez počátečního „num“, kontroluje se pouze neprázdnost pole. Pokud zadaná hodnota neodpovídá daným kritériím, je zobrazeno chybové hlášení (u numerických prvků odstraňujeme v chybovém hlášení prefix „num“), fokus je vrácen na nevyhovující prvek a návratovou hodnotou false je zabráněno odeslání formuláře. Pokud všechna kontrolovaná pole vyhovují, funkce vrací true.

Co říci závěrem? Domnívám se, že popsaná funkce může ušetřit hodně mechanické práce v jednodušších formulářích, jakých je určitě většina (nejrůznější registrace apod). Na druhou stranu, popsaná konvence, tj. předávání parametrů jako jmen ovládacích polí, přirozeně má svá omezení, jednak v obvykle chybějící diakritice (málokdo si „troufne“ používat diakritiku ve jménech proměnných), za druhé pak v jakémsi „vynuceném“ pojmenování polí – což nemusí vyhovovat u složitějších webů svázaných programátorskými pravidly.

K univerzálnímu kontrolnímu skriptu se v některém z příštích článků určitě vrátíme s dalšími vylepšeními (např. kontrola rozsahu u numerických polí, kontrola emailové adresy apod.). Vyvstává tedy známá otázka „Kam s ním?“ – kam umístit další parametry polí, která potřebujeme? Uvítám váš názor – a zkušenosti – v připojené diskuzi.

Přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.