Univerzální skript pro kontrolu formulářů podruhé

27. dubna 2001

•

V předchozím článku jsem vám ukázal, jak lze jeden univerzální skript použít pro rutinní kontrolu opakujících se formulářů. Pro zadání údajů potřebných pro kontrolu (jméno formulářového pole, kontrolovaný typ apod.) jsem využil jméno ovládacího prvku, zadané přímo v HTML. Podle ohlasů se zdá, že většina z vás dává přednost přehlednějšímu zadání těchto údajů například ve formě pole přímo v JScriptu. Dobrá tedy, zkusíme to ještě jednou a od základu jinak.

Následující formulář byl v trochu jiném provedení použit již v minulém článku. V této ukázce kontrolujeme, zda je vybrána nějaká hodnota v rozbalovacím seznamu Oslovení, a dále, zda pole Jméno a Příjmení neobsahují prázdný řetězec. Vyzkoušejte tedy neúplně vyplnit a odeslat (pokud vše vyplníte správně, objeví se alert okénko „FORMULÁŘ V POŘÁDKU“):

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

<form onSubmit="return Validate(this,ff1)">
    Oslovení: <select name="osloveni">
    <option value="-- vyberte oslovení --">-- vyberte oslovení --</option>
    <option value="Pan">Pan</option>
    <option value="Paní">Paní</option>
    <option value="Slečna">Slečna</option>
    </select><br>
    Jméno: <input type="text" name="Jmeno" size="20"><br>
    Příjmení: <input type="text" name="Prijmeni" size="20"><br>
    <input type="checkbox" name="C1" value="ON">Vdaný/Vdaná
    <p><input type="submit" value=" Odeslat " name="B1"></p>
</form>

Oproti minulému článku je v HTML kódu formuláře jedna podstatná změna, a sice ve volání funkce Validate. První parametr funkce, tedy ukazatel na kontrolovaný formulář, zůstal zachován, přibyl však parametr druhý, a to proměnná s nečitelným názvem ff1 - zkratka to z názvu "form field 1". Tato proměnná je právě ono v JavaScriptu definované pole, jež obsahuje všechny informace, potřebné pro kontrolu formuláře funkcí Validate. Podívejme se tedy nejprve na definici pole ff1 (poznámka: pole ff1 je nejvhodnější definovat ve skriptu v hlavičce stránky):

var ff1 = new Array()
ff1[0] = new MeSelect( "Oslovení", 1 )
ff1[1] = new MeText( "Jméno", false )
ff1[2] = new MeText( "Příjmení", false )

Co předchozí zápis znamená? Tři námi nadefinované prvky pole ff1 nejsou nic jiného než objekty, vytvořené pomocí vlastních konstruktorů ( MeSelect a MeText ). Každý z konstruktorů vytváří vlastní třídu, jež má za úkol kontrolovat příslušný ovládací prvek - jak je z názvů patrné, třída MeSelect kontroluje rozbalovací seznam, třída MeText pak standardní textové pole.

Proč používáme objekty?

Využití báječných vlastností objektů, ač se zdá na první pohled složité, přináší mnoho výhod. Ta hlavní vyplývá ze samotné vlastnosti objektů - zapouzdření a poměrně značná kompaktnost kódu. Pokud jste četli diskusi k minulému článku, víte, že hlavní diskutovaný problém byl, jak vhodně a jednoduše zapsat informace, potřebné ke kontrole toho kterého ovládacího prvku - pro každý prvek totiž potřebujeme zadat jiný typ a rozsah údajů, například pro numerický zadáváme rozsah, popř. přesnost desetinných míst, pro text stačí méně údajů apod. Takto nám stačí pro každý kontrolovaný formulář vytvořit jedno pole, v němž každý prvek reprezentujeme jedním voláním konstruktoru - a je hotovo, zbytek kódu, tedy samotné konstruktory a funkci Validate uložíme ve sdíleném souboru.

Druhou výhodou je jednoduchá možnost vytváření dalších vlastních tříd pro kontrolu speciálních údajů (e-mailu, čísla karty, datumu...), které můžeme shodným způsobem navazovat na formulářové položky, a v neposlední řadě možnost jednoduchého "upgrade" kontrolních funkcí v případě zjištění chyby nebo vylepšení jejich kódu - pokud upgrade napíšeme inteligentním způsobem, můžeme dokonce přidat další parametry do stávajících konstruktorů, aniž bychom měnili jejich volání v již fungujících webech - stále nám stačí jeden sdílený soubor s konstruktory a funkcí Validate.

Ukážeme si nejprve, jak vypadá konstruktor pro třídu MeText:

function MeText( strName, fAllowEmpty ){
    this.strName = strName
    this.fAllowEmpty = fAllowEmpty
    this.Validate = function( field ) {
        if ( (!this.fAllowEmpty) && (field.value=="") ) {
            alert('Vyplňte prosím hodnotu do pole "' + this.strName + '".')
            field.focus()
            return false
        }
        return true
    }
}

Do konstuktoru jsou předávány dva parametry, první určuje jméno formulářového pole, tak jak se zobrazí v případném chybovém hlášení, a druhý je příznak, určující, zda je ve formulářovém poli povoleno zadat prázdný řetězec. Oba tyto parametry konstruktor uloží do členských proměnných objektu, a zároveň nadefinuje metodu Validate, mající za úkol, až přijde její čas, provést samotnou kontrolu správnosti obsahu formulářového pole. Metoda Validate přijímá jeden parametr, jímž je ukazatel na kontrolované pole, a pozor: jméno a hlavička této funkce musí být shodná pro všechny námi definované konstruktory dalších kontrolních tříd (MeSelect apod). Jak probíhá samotná kontrola na formulářovém poli, je myslím dostatečně patrné z kódu, který je pro tyto "výukové" účely psán naprosto neúsporně - jistě sami najdete tucet možností, jak jej zestručnit.

Druhou kontrolní třídou, použitou v příkladu, je třída MeSelect, jejíž kostruktor vypadá takto:

function MeSelect( strName, iFirstIndex ){
    this.strName = strName
    this.iFirstIndex = iFirstIndex
    this.Validate = function( field ) {
        if (field.selectedIndex<this.iFirstIndex) {
            alert('Vyberte prosím hodnotu v poli "' + this.strName + '".');
            field.focus()
            return false
        }
        return true
    }
}

Opět přijímáme dva parametry, první má týž význam jako u třídy MeText, druhým je index prvního prvku, který je pokládán za platný výběr v příslušném poli SELECT. Index počíná nulou.

Nakonec zbývá napsat kód funkce Validate. Kód je opět sdílený, tzn. lze použít jednu funkci univerzálně pro všechny formuláře kontrolované uvedenou technikou:

Podmínka v hlavní smyčce funkce Validate je zde proto, abychom u rozsáhlejších formulářů nemuseli definovat kontrolní funkce pro všechna použitá formulářová pole - ostatně toto jsme uplatnili i v uvedeném příkladu, kdy zatrhnítko Vdaný/vdaná není kontrolováno žádnou funkcí.

A to je pro tentokrát vše. V následujícím článku či článcích se můžete těšit na pokračování, ve kterém si ukážeme kontrolní funkce pro další typy údajů, jako je numerický údaj, tlačítko (ano, i tlačítko se dá kontrolovat) a další. Jako vždy, těším se na vaše názory v diskusi.

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

Předchozí článek Napodobujeme průhledné sklo ve Photoshopu 2.

Další článek Diskusní fórum v PHP pro každého - výpis příspěvků