Kontrola formuláře trochu jinak

Téměř základní úlohou pro klientský JavaScript je kontrola webových formulářů, zda neobsahují prázdná či chybně vyplněná pole. Skripty pro tento účel bývají více či méně komplikované, jejich výstupem je však téměř pokaždé „alert“ okno s příslušným textem. V tomto článku si ukážeme jednoduchý způsob, jak lze takové výstupní hlášení alespoň trochu ozvláštnit.

Jako vždy nejprve malý příklad. Po kliknutí se vám otevře nové okno s formulářem, který obsahuje tři povinná pole. Pokud některé z nich necháte nevyplněné a formulář odešlete, zobrazí se na 1.5 sekundy místo obvyklého „alert“ okénka hlášení ve stylu kontextové nápověry známé z Windows – tzv. tooltip. Příklad je určen pro prohlížeče Internet Explorer od verze 5 a Netscape Navigator od verze 6, pro starší prohlížeče se zobrazí obvyklé okénko „alert“.

Popis použitého skriptu

Nejprve potřebujeme vytvořit vhodný formulář, aby vůbec bylo co kontrolovat. V příkladu byl použit následující kód, kontrolní funkce Validate je volána v handleru události onSubmit:

<form method=“POST“ onSubmit=“return Validate(this);“>
<table border=“0″ cellpadding=“0″ cellspacing=“0″ width=“400″ height=“124″>
    <tr><td height=“25″>Jméno:</td>
        <td height=“25″><input type=“text“ name=“name“ size=“20″><font color=“#FF0000″>*</font></td></tr>
    <tr><td height=“25″>Příjmení:</td>
        <td height=“25″><input type=“text“ name=“surname“ size=“20″><font color=“#FF0000″>*</font></td></tr>
    <tr><td height=“25″>E-mail:</td>
        <td height=“25″><input type=“text“ name=“email“ size=“20″><font color=“#FF0000″>*</font></td></tr>
    <tr><td height=“22″>Počet vlasů:</td>
        <td height=“22″><input type=“text“ name=“hair_count“ size=“9″></td></tr>
    <tr><td height=“27″>&nbsp; </td>
        <td height=“27″><input type=“submit“ value=“Submit“ name=“B1″></td></tr>
    <tr><td height=“27″></td>
        <td height=“27″><small>Poznámka: hvězdička <font color=“#FF0000″>*</font> značí povinné pole.</small></td></tr>
</table>
</form>

Kontrolní funkce Validate také neobsahuje žádné záludnosti, pouze s využitím níže popsané funkce CheckEmptyField zkontroluje 3 povinná pole, zda nejsou prázdná, a vrátí výsledek testu:

function Validate(theForm) {
    if( !CheckEmptyField(theForm.name,“Vyplňte prosím pole jméno.“) ) return false;
    if( !CheckEmptyField(theForm.surname,“Vyplňte prosím pole příjmení.“) ) return false;
    if( !CheckEmptyField(theForm.email,“Vyplňte prosím pole e-mail.“) ) return false;
    // uspech
    return true;
}

Funkce CheckEmptyField má dva vstupní parametry, a to kontrolované pole a zprávu, jež se zobrazí v případě chybného zadání. Provede jednoduchou kontrolu, zda je dané pole neprázdné (jednoduchou tedy jen pro účely tohoto příkladu, v praxi bude zřejmě obvyklá inteligentnější kontrola, například správného formátu čísla s využitím RegExp objektu a podobně). Je-li vše v pořádku, neděje se nic a funkce vrací úspěch.

Má-li se zobrazit chybové hlášení, funkce nejprve otestuje, zda uživatelův prohlížeč podporuje potřebné funkce pro zobrazení „žlutého okénka“. Pokud ne, zobrazí se standardní „alert“ okno. Pokud ano, jsou zobrazeny dva dosud skryté HTML elementy a do druhého z nich, s názvem requiredtext, je vypsáno chybové hlášení. Nakonec je nastaven časovač na funkci HideIt, která po uplynutí zadaného intervalu oba tyto HTML elementy opět skryje:

function CheckEmptyField( theField, theMessage ) {
    if( theField.value==““ ) {
        theField.focus();
        if(document.getElementById) {
            document.getElementById(‚required‘).style.visibility=“visible“;
            document.getElementById(‚requiredtext‘).style.visibility=“visible“;
            document.getElementById(‚requiredtext‘).innerHTML=theMessage;
            setTimeout(„HideIt()“,1500);
        } else {
            alert(theMessage);
        }
        return false;
    } else {
        return true;
    }
}

V předchozím odstavci zmíněné HTML elementy je nutno před jakoukoli manipulací nejprve vytvořit – k tomu slouží kus JavaScriptového kódu v těle stránky, který zároveň vytvoří oba elementy pouze tehdy, pokud prohlížeč vůbec umožňuje podobné „legrácky“. V příkladu byl použit jeden obrázek (obsahuje kompletní pozadí žlutého okénka) a jeden odstavec, do nějž vypisujeme text chybového hlášení:

if(document.getElementById) {
    document.write(‚<img ID=“required“STYLE=“visibility:hidden; position:absolute; left:300; top:120″src=“required.gif“>‘);
    document.write(‚<p ID=“requiredtext“STYLE=“visibility:hidden; position:absolute; left:365; top:155″>abc</p>‘);
}

Po této odbočce do těla stránky se vrátíme zpět k rozpracovaným kontrolním funkcím, kde nám už chybí jen poslední část, a to funkce HideIt. Pozorný čtenář již z předchozího textu její účel zná, nepozorný si jej snadno odvodí z následujícího kódu:

function HideIt() {
    document.getElementById(‚required‘).style.visibility=“hidden“;
    document.getElementById(‚requiredtext‘).style.visibility=“hidden“;
}

Zdrojový kód příkladu je vám plně k dispozici, chcete-li navíc použít i umělecky „vysoce hodnotný“ obrázek žlutého okénka, máte k tomu mé svolení.

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

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