JavaScript – kontrola formuláře před odesláním

31. května 2000

•

Vážení čtenáři, vítám vás ve dvanáctém díle díle seriálu o JavaScriptu. O několik dílů nazpátek jsem psal o odesílání formuláře. Protože však další díly vysvětlily problematiky funkcí, mohu se vrhnout na probrání způsobů, jak zkontrolovat správnost položek ve formuláři a nedovolit jeho odeslání, dokud formulář nebude v pořádku.

Právě na kontrolu správnosti vyplnění formuláře je JavaScript jako stvořený. Jeho možnosti jsou tu veliké, a můžete zkontrolovat skutečně cokoliv se vám zachce.

Ale začneme popořádku. Počítač, někde hluboko uvnitř sebe, kam se obyčejný uživatel hned tak nedostane, a kam pustí pouze svého psychologa, pracuje ve dvojkové soustavě. Jinak řečeno, pracuje na odpovědích typu ano/ne. A stejně tak i v JavaScriptu můžeme s takovými hodnotami pracovat. Nazývají se true a false. Hodnota true (v překladu pravda) tak představuje odpověď ano. Hodnota false (v překladu lež, faleš) znamená odpověď ne. A dokonce nám dokáže v těchto hodnotách i odpovídat. Tedy určitě ne na nějaké abstraktní otázky, ale matematiku zvládá docela dobře. Pouze ve sci-fi nám počítač dokáže odpovídat, jaký je smysl života, ale v reále to nejsou otázky pro něj, ale pro filozofy.

Stejně tak lze leccos řídit pomocí hodnot true a false. A jedna z těch věcí je i odesílání formuláře. Princip je snadný a nejlépe ho lze pochopit z výpisu HTML stránky:

<html>
<head>
<title>Zablokovaný formulář</title>
</head>
<body>
<form onSubmit="return false;">
<input type="submit" value="Odeslat formulář">
</form>
</body>
</html>

A takto to vypadá:

Pokud se divíte, k čemu to má sloužit, a marně klikáte na tlačítko, aniž by se cokoli dělo, tak vězte, že o to jde. Tento formulář totiž nejde odeslat. Odesílání tohoto formuláře je zablokováno. Jak je to uděláno? Pokud použijeme ve značce <form> atribut onSubmit, spustí se příkaz v JavaScriptu, který je za onSubmit= v uvozovkách těsně před odesláním formuláře. Pokud začneme slovem return, potom dokonce můžeme odesílání formuláře zablokovat. Za slovem return totiž prohlížeč číhá, jestli dostane true (potom formulář odešle), a nebo false (potom odesílání formuláře zruší a nic se nestane). A pokud se podíváte do příkladu, máme tam za return false, tedy odeslat formulář je nemožné.

To, co vypadá jako hračka, je ale náramně užitečná věc pro zkontrolování formuláře i spoustu dalších věcí. Stačí pouze v atributu onSubmit spustit kontrolu formuláře a vrátit true, pokud je vše v pořádku, nebo false, pokud něco není správně. A tím dostáváme možnost, jak zablokovat odeslání špatně vyplněného formuláře. Zkusme to hned na jednoduchém příkladě. Nejjednodušší možnost je požadavek, aby nějaká položka byla vyplněná:

<html>
<head>
<title>Kontrola I</title>
<script type="text/javascript" language="JavaScript"><!–
function kontrola()
{
    var text_jmena = self.document.forms.f.jmeno.value;
    var je_ok = text_jmena != „“;
    if (je_ok == false) alert(‚Promiňte, ale jméno musí být zadáno!‘);
    return je_ok; }
// –>
</script>
</head>
<body>
<form name="f" onSubmit="return kontrola();">
Jméno: <input name="jmeno" type="text">
<input type="submit" value="Odeslat formulář">
</form>
</body>
</html>

A jak to tedy pracuje? Formulář jsem pojmenoval pomocí atributu name uvnitř značky <form> jako f. Pole, do kterého se bude zadávat text jsem také pojmenoval jako jmeno pomocí atributu name uvnitř značky <input>. To již znáte. Hlavní roli tu ovšem hraje příkaz psaný za onSubmit=. Začínám slovem return, tím říkám, že se má kontrolovat, zda se vrátí false, nebo true, a podle toho neodeslat, nebo odeslat. Za slovem return je volání funkce kontrola.

Funkci kontrola mám psanou o něco výše. Představuje čtyři řádky. Pro přehlednost popíšu funkci jednotlivých řádků:

První řádek pouze založí proměnnou s názvem text_jmena a uloží do ní to, co vyplňovatel formuláře zapsal do položky jméno. Zápis self.document.forms.f.jmeno.value by vám měl být už známý, pro jistotu napíši, že se jedná o vyzvednutí textu, který je zapsaný uvnitř položky jméno. Pro detailnější informace se můžete podívat na článek, který tento zápis rozebírá podrobněji.
Druhý řádek založí proměnnou je_ok, a uloží do ní, jestli byla vyplněna položka jméno. To zjišťujeme tak, že se zeptáme JavaScriptu asi takto: "Je text_jmena různý od prázdného, tedy nevyplněného textu?". V zápise to vypadá tak, že prázdný text se píše jako dvě uvozovky vedle sebe "". Na různost se ptáme pomocí dvojice znaků !=. A počítač odpoví buď true (v případě, že text_jména je různý od prázdného textu), nebo false (když text_jména není různý od ""). Odpověď potom uložíme do proměnné je_ok. Moc prosím, nedejte se zmást zdánlivou složitostí, je to snadné, jenom pro některé z vás trochu nezvyklé.
Třetí řádek vypíše zprávu pro toho, kdo vyplňuje formulář, není-li to v pořádku. Na to používáme konstrukci if. Počítač vyhodnotí to, co je uvnitř závorek za if. Pokud mu vyjde true, provede i další příkaz. Pokud mu vyjde false, tak další příkaz přeskočí. V našem příkladě je na místě dalšího příkazu alert, který otevře okno a vypíše upozornění. Toto upozornění se díky konstrukci if ukáže jenom tehdy, když je_ok je false. K tomu používáme zápis je_ok == false. Zápis == znamená, že se ptáme, jestli se něco sobě rovná, jinak řečeno, jestli je to stejné. A pokud proměnná je_ok je shodná s false, potom se vypíše upozornění.
Čtvrtý řádek vrací mimo funkci hodnotu proměnné je_ok. Pokud je false, potom formulář není vyplněný dobře. Pokud je true, potom je vše v pořádku.

Funkce kontrola tedy vrací pomocí příkazu return false, pokud není formulář vyplněn správně. V takovém případě onSubmit zablokuje odesílání. Zde si to můžete vyzkoušet:

Tento díl je přímo nadupaný novými věcmi. Pokud něčemu nerozumíte, budu rád, když se ozvete. Buď v diskusi, a nebo přímo mě. Na téma kontroly formulářů určitě bude ještě alespoň jeden díl, kdy se budu věnovat složitějším kontrolám. Ale mezitím bude několik dalších dílů, které vysvětlují dalších potřebné věci. A také bych rád počkal na vaše reakce, abych mohl přidat to, co budete žádat.

A to je pro tento díl vše.