Check Form - kontrola formulářů pomocí Javascriptu

  • 24.8.2009
  • Tomáš Neděla

Formuláře jsou nedílnou součástí každého internetového obchodu. Používají se zejména při zjišťování informací o uživateli v nákupním košíku před odesláním objednávky, při registraci uživatele a dalších činnostech, u kterých vyžadujeme po uživateli vyplnění vstupních políček. Čím složitější a obsáhlejší internetový obchod je, tím více je samozřejmě i políček pro vyplnění.

Každá dobře napsaná webová aplikace by si interně měla tyto uživatelem zadaná pole kontrolovat, ať již z hlediska bezpečnosti (ochrana proti XXS cross-site-scriptiong, či SQL injection), tak i z hlediska obsahové stránky (políčko pro email musí opravdu obsahovat email uživatele). Pro lepší uživatelskou přístupnost by tyto kontroly měly fungovat ve dvou fázích, a to dynamicky přímo v prohlížeči uživatele (pomocí JavaScriptu), a pak samozřejmě na serveru při odeslání formuláře. Nezřídka vidím na internetu formuláře, kdy při jejich odeslání mi až po dalším načtení stránky systém oznámí, že daná data byla špatně vložena a co už je vrcholem mnohých webových aplikací, mi zadaná data smaže, takže je mohu psát znovu a znovu.

Jako firma vytváříme mnoho internetových obchodů na míru a tak vlastně každý formulář, dle objednatele internetové aplikace, splňuje jiné kritéria povinnosti vyplnění určitých informací pro odeslání formuláře. Bylo velmi složité pokaždé vytvářet nový skript pro kontrolu údajů formuláře, proto jsem si vytvořil skripty jak na straně serveru, tak i na straně uživatele, které mi pomáhají tyto odlišnosti velmi rychle měnit.

Skript na straně serveru prozatím nebudu prezentovat, ale dám vám k dispozici JavaScript, který byste u svých formulářů mohli využít. Tento kód využívá možností knihovny JQUERY, proto je nutné před spuštěním tohoto skriptu si tuto knihovnu stáhnout a zahrnout do webové stránky.

Kód funguje tak, že si ihned po načtení stránky vezme všechny formuláře tzv. „pod sebe“ a pokud uživatel odešle formulář, tak se data polí zkontrolují. V případě chyby se políčka označí a vypíše se hlášení, které políčka je nutno správně doplnit. Tato kontrola funguje na formulářové elementy typu INPUT (typ RADIO, CHECKBOX, TEXT, PASSWORD), TEXTAREA a SELECT.

Ve formuláři je pak jen nutné zadat, které políčka se mají kontrolovat pomocí atributu CLASS, a pomocí atributu TITLE lze napsat chybové hlášení. Prozatím fungují tyto přepínače (třídy):

  • required – pole je nutno vyplnit
  • check_email – kontroluje email ve formátu xxx@xx.xx
  • check_phone – kontroluje, zda uvedená hodnota je 9-místné číslo

Případné další metody budou doplněny, prozatím však nebylo potřeba.

Pokud je hodnota formuláře špatná (tedy není vyplněna/označena, má špatnou hodnotu), tak se na daný formulářový element aplikuje třída „checkFormWarning“. Proto je asi dobré si tuto třídu v CSS stylech nějakým způsobem upravit. (např. .checkFormWarning {background:red} )

 

Příklad:

...

<input type=”text” name=”name” value=”” class=”required” title=”Uveďte prosím Vaše jméno”/>

<input type=”text”name=”email” value=”” class=”check_email” title=”Zadejte správně formátovaný email”/>

<input type=”text”name=”email” value=”” class=”check_phone” title=”Zadejte 9-ti místné telefonní číslo”/>

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

...