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

17. září 2001

•

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):

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:

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:

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: