Kontrola formuláře trochu jinak

8. ledna 2003

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.

Štítky: Články

Mohlo by vás také zajímat

Nejnovější

2 komentářů

  1. Brona

    Kvě 8, 2010 v 11:22

    Tento článek je už pravda moc moc starý, ale přesto jsem se jej pokusil využít pro kontrolu polí mého formuláře. V zásadě nemám připomínek, ale má jednu mouchu.

    Bohužel mi to rozhází (posune) další prvky stránky dolů (po prvním stisku tlačítka, když nemám vyplněno), protože se generuje stránka s neviditelným (případně viditelným) obsahem, pořád to je obsah, který mi způsobí to posunutí.

    Budu se muset ještě poohlídnout po jiné metodě.

    PS: V příkladu, který je prolinkovaný naživo, je ve funkci Validate po //úspěch false, kdežto v popisu přímo v článku je //úspěch true

    Odpovědět
  2. Trisia

    Lis 3, 2010 v 14:27

    Dekuji za umelecky hodnotny obrazek okynka. A samozrejme za navod.

    Odpovědět

Napsat komentář: Brona Zrušit odpověď na komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *