Blikající nevyplněná pole formuláře

    0

    Co udělá typický JavaScript, použitý při ověřování vstupu z formuláře, pokud zjistí, že některé pole bylo nesprávně vyplněno? Většinou vypíše hlášení typu „Vyplňte prosím pole to a to“, popřípadě přesune focus na příslušný ovládací prvek. Ve velkých formulářích má ale uživatel leckdy problém najít, které ze stodvacetipěti textových polí vlastně pozapomněl vyplnit – v prohlížeči Internet Explorer mu můžeme pomoci rozblikáním příslušného políčka.

    Nejprve malá ukázka – zkuste odeslat následující formulář: pokud nevyplníte pole pro Jméno, kontrolní skript by měl ohlásit chybu a rozblikat příslušné políčko (ještě jednou zopakuji, že blikání funguje pouze v prohlížeči Internet Explorer):

    Jméno:
    Stav:
    Popis:
     

    Blikání je v principu docíleno periodickou změnou barvy pozadí ovládacího prvku v inline stylu tohoto prvku. Stačí tedy do kontrolního skriptu přidat volání funkce, která pomocí periodicky nastavovaného časovače setInterval prvek rozbliká, a dále zajistit zrušení blikání po vyplnění prvku. Podívejme se na tyto kroky blíže.

    Nejprve nutné úpravy v kontrolním skriptu. Ten lze napsat zcela libovolně dle vkusu a potřeb každého autora, doplní se pouze volání funkce StartBlink v případě chyby. Skript může vypadat nějak takto:

    function Validate(theForm) {
    var f;
        f=eval("theForm.jmeno")   
        if( f.value=="") {
            alert("Vyplňte pole Jméno")
            StartBlink(theForm,f);
            return false;
        }
        f=eval("theForm.stav")   
        if( f.selectedIndex<=0) {
            alert("Vyberte položku v poli Stav")
            StartBlink(theForm,f);
            return false;
        }
        f=eval("theForm.popis")   
        if( f.value=="") {
            alert("Vyplňte pole Popis")
            StartBlink(theForm,f);
            return false;
        }
        return true;
    }

    Funkce StartBlink akceptuje dva parametry. Prvním je objekt kontrolovaného formuláře a druhým objekt chybně vyplněného prvku. Funkce zavolá poprvé „blikací“ funkci Blink a „přeloží“ pro ni odkaz na chybně vyplněný prvek z „ukazatelového“ do „řetězcového“ odkazu (což využijeme při volání funkcí časovače ve funkci Blink). Dále přemístí fokus na příslušný ovládací prvek (proč neulehčit tuto práci kontrolní funkci) a rovněž nastaví globální příznak fBlink – tento příznak se později využívá pro přerušení blikání. Vystačíme s jedním příznakem, neboť nepředpokládáme, že bychom rozblikávali více prvků najednou. U následujícího kódu funkce StartBlink je tedy uvedena i definice globální proměnné fBlink:

    var fBlink;
    function StartBlink(theForm, theField) {
        theField.focus();
        fBlink = true;
        Blink("document.forms[‚"+theForm.name+"‘]." + theField.name,"red");
    }

    Samotná funkce Blink změní barvu pozadí ovládacího prvku (voláním funkce ChangeColor) a nastaví časovač na změnu barvy pozadí na opačnou po uplynutí 200 milisekund. Zároveň kontroluje hodnotu proměnné fBlink a v okamžiku jejího nastavení na hodnotu false přeruší blikání a nastaví pozadí prvku zpět na neutrální barvu:

    function Blink(fieldName, theColor) {
        var theField=eval(fieldName)
        if (fBlink) {
            ChangeColor(theField,theColor);    
            if(theColor=="red") {
                setTimeout("Blink(\"" + fieldName + "\",\"\")",200);
            } else {
                setTimeout("Blink(\"" + fieldName + "\",\"red\")",200);
            }   
        } else {
            ChangeColor(theField,"");    
        }
    }

    Samotná funkce ChangeColor je poměrně prostá – je v ní však zakopán onen pes nefunkčnosti pod Netscape Navigatorem – uvedená konstrukce funguje jen pro Internet Explorer (předpokládám, že některý ze čtenářů jistě objeví metodu, jak blikání zprovoznit pod oběma prohlížeči – já osobně jsem ale na takový způsob nepřišel.

    function ChangeColor( theField, theColor ) {
        theField.style.background = theColor
    }

    Zbývá maličkost – zrušit blikání ve chvíli, kdy uživatel vyplní inkriminovaný ovládací prvek. K tomu slouží funkce StopBlink, která pouze změní hodnotu proměnné fBlink a ostatní nechá na vnitřním mechanismu výše uvedené funkce Blink. Volat funkci StopBlink můžeme dle libosti, nejtypičtější umístění je v handleru události onChange každého z ovládacích prvků, který může být „postižen“ blikáním:

    function StopBlink() {
        fBlink = false;
    }
    … příklad HTML pro ovládací prvek:
    <input type="text" onChange="StopBlink()" name="jmeno" size="20">

    A to je pro tentokrát vše, blikání zdar a 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.

    Žádný příspěvek v diskuzi

    Odpovědět