0 Kč s DPH

4. Validace dat pomocí javascriptu

Důležitým krokem k uživatelsky přívětivým formulářům, je zachování již jednou zadaných dat. Toho při budování vlastních formulářů dosáhneme validací dat z formuláře na straně klienta pomocí javascriptu.

Většina formulářů má definované povinné a nepovinné položky, které jsou po odeslání formuláře zkontrolovány, a je-li povinná položka prázdná (nebo nemá správný tvar), nedojde ke zpracování formuláře, ale vypíše se patřičné chybové hlášení. Hodnoty polí, které uživatel do formuláře zadal nebo vybral, by ve správně ošetřeném formuláři měla být zachována (pak má návštěvník Vašich stránek plné právo být nepříčetný poté, co musí zadávat znovu hromadu dat).

Povinné položky Vašeho formuláře jsou kontrolovány (podle definic klíčů _required, popř. _regex) po odeslání na našem serveru, a v případě prázdné nebo nevalidní povinné položky není formulář zpracován, ale vypíše se chybové hlášení (toto pouze v případě, je-li formulář definován jako Podpis článku). Protože není technicky možné zachovat ve vlastních formulářích uživatelem vyplněná data (jak tomu je například u Kontaktního formuláře), je dobré, abychom provedli validaci povinných dat ještě na straně klienta (v prohlížeči) a to pomocí skriptovacího jazyku Javascript).

Jako první krok si nadefinujeme formluář, který vyžaduje zadání e-mailu (např. pro zasílání newsletterů):

<form method="post" action="/mailform/" onsubmit="return validate()">
<input type="text" name="email[_value]" id="email" value="" />
<input type="hidden" name="email[_title]" value="E-mail" />
<input type="hidden" name="email[_required]" value="1" />
<input type="hidden" name="email[_regex]" value="/^(.+)@([^@]+)$/" />
<input type="submit" value="Odeslat" />
</form>


Tento formulář se od předcházejících liší parametrem onsubmit="return validate()" v tagu form, který po stisknutí tlačítka Odeslat, zavolá javascriptovou funkci validate(), která zkontroluje povinná data ještě na straně klienta, než dojde k jejich odeslání na náš server.

Funkce validate() má následující definici:

<script type="text/javascript">
function validate()
{
var email = document.getElementById('email').value;
if (email == '') {
alert('Zadejte svůj e-mail');
return false;
}
var regex = new RegExp('(.+)@([^@]+)');		
if (email.match(regex) == null) {
alert('Zadaný e-mail nemá správný tvar');
return false;
}
return true;
}
</script>


Pokud ovládáte javascriptový framework JQuery, který využívá i systém inPage, můžete využít pro validaci dat i toho nástroje (psaní kódu je mnohem snažší, rychlejší a multiplatformní, než čistý javascript). Tuto knihovnu používá inPage defaultně, není potřeba ji proto zavádět.


Všechny díly seriálu:

  1. Tvorba jednoduchého formuláře
  2. Podrobný popis parametrů
  3. Pokročilé vlastnosti
  4. Validace dat pomocí javascriptu
  5. Příklad

Přidat komentář

Přehled komentářů

  • jquery

    23.3.2013 11:59:10 | Vilém Sýkroa

    Dobrý den,
    zmiňujete použití jquery systémem. Je zde implementovaná funkce datepicker? viz http://jqueryui.com/datepicker/

    Odpovědět

  • Re: jquery

    25.3.2013 14:13:41 | Admin

    Knijhovna jQueryUI je pritomna pouze v administraci inPage, ale neni poblem si do konkretni stranky datapicker pridat spolu s css a pouzit jej.
    Priklad viz vami uvedeny zdroj. Samotna knihovna jQuery (v1.6.3) je v inPage vzdy pritomna a neni ji nutno vkladat (a ani se to nedoporucuje).

    Odpovědět

inPage.cz - webové stránky, doména a webhosting snadno.