site logo

Validace webového formuláře

Formuláře které mají za následek update databáze vždy, dotazové formuláře podle potřeby, ověřujeme zda mají požadovaný obsah. Většina validačních funkcí je dobře popsána, proto není potřeba je tady opakovat. Zde uvedu jen základní postup kontroly formuláře. Důležitější než správně vyplněný formulář je ověření práv uživatele měnit data, jak na to najdete v tomto článku. Nakonec bude několik slov o použití VBScriptu.

Zpracování formulářů se neobejde bez skriptů. Minimálně na straně serveru musí být skript, který zpracuje obsah formuláře. Na straně klienta (v browseru) obvykle potřebujeme skripty k ověření validity formuláře. Zatímco na straně serveru jistě použijete Váš oblíbený jazyk, na straně klienta musíme použít JavaScript, který je standard pro webové prohlížeče.

Je třeba si uvědomit, že tyto stránky jsou věnovány problémům intranetu, kde není důvod používat browser s vypnutým JavaScriptem. Na internetu je potřeba počítat s vypnutými skripty a validace formulářů, nebo blokování vícenásobného odeslání formuláře nemusí fungovat.

Kontrola formuláře

Asi těžko najdeme jediný správný způsob napsání validačního skriptu. Uvedu postup který používám. Pro každý konkrétní formulář připravím centrální řídící funkci, jednoduché ověření je součástí tohoto centrálního skriptu, pro ověření složitějších datových typů využívám samostatné validační funkce.

Centrální validační funkce prochází jednotlivé prvky formuláře a testuje jejich obsah. Každý prvek formuláře je testován samostatně, aby bylo možné případně spustit alert, který jednoznačně popíše zjištěnou chybu a ukončí skript s návratovou hodnotou false, která zabrání odeslání formuláře. Asi není vhodné na uživatele vyblafnout všechny jeho chyby najednou, stejně většinou opraví jen jednu chybu. Po kladném ověření všech položek formuláře je proveden odesílací kód pro zabránění vícenásobného odeslání a teprve potom je vrácena hodnota true a formulář je odeslán.

Validace některých datových typů není zcela triviální a proto připravíme obecné validační funkce, které může centrální validační skript používat opakovaně. Je vcelku jednou zda tyto funkce jsou součástí kódu stránky, nebo jsou umístěny v externí knihovně.


<script type="text/javascript">
function checkForm(myForm) {
  ...
  // --- inline kontrola minimalni delky textu ---
  if(myForm.dilec.value.length < 2) {
    alert("vyplňte řádně název dílu");
    return false;
  }
  // --- inline kontrola prvku select ---
  if(myForm.pracovnik.value == "") {
    alert("Není vybráno jméno pracovníka");
    return false;
  }
  // --- kontrola celeho cisla pomoci funkce ---
  if(checkInt(myForm.kusy.value) == false) {
    alert("počet kusů musí být celé číslo");
    return false;
  }
  // --- kontrola datumu pomoci funkce ---
  if(checkDate(myForm.termin.value) == false) {
    alert("chybně vyplněn termín (dd.mm.yyyy)");
    return false;
  }
  // --- kód pro odeslání formuláře ---
  return true;
}
</script>

<form method="post" action="xxx.asp" onsubmit="return checkForm(this);">
...
</form>

Důležitý je způsob předávání odkazů na prvky formuláře. V ukázce kódu jsou odkazy červené. Odkaz na celý formulář je předáván do validační funkce pomocí parametru this v elementu form. Uvnitř centrální validační funkce jsou odkazy na jednotlivé prvky formuláře vytvořeny odkazem na formulář a jménem formulářového prvku. Nemusíme tedy používat id jednotlivých prvků formuláře. Věnujte pozornost odladění celého skriptu. Chyba v kódu skriptu někdy způsobí odeslání formuláře jako kdyby byl validní.

Kontrola textu

Zatímco maximální počet znaků v textovém poli je možné omezit atributem vstupního prvku formuláře např: <input type="text" name="xxx" maxlength="12" />. Minimální, nebo nulovou délku musíme testovat pomocí skriptu např. tak jak je naznačeno v první části ukázky validačního skriptu.

textarea

Prvek textarea nemá žádnou obdobu atributu maxlength a proto délku textu je možné omezit pouze pomocí skriptu. Tento prvek ovšem předpokládá libovolný text, proto jeho omezení je proti smyslu tohoto prvku. Pro zabránění vtipálků kopírovat extrémě dlouhé texty používám omezení délky na serveru.

select

Pokud select obsahuje pouze platné prvky, není potřeba jeho obsah testovat vůbec, vždy je totiž vybraná nějaká platná hodnota. Někdy se první položka prvku select využívá jako nadpis např. <option value="">zadej jméno pracovníka</option>. Potom musíme testovat vždy zda byla vybrána reálná hodnota (zde prázdná hodnota je chyba) a označuje, že výběr z prvku select byl opominut. Bez použití atributu value v elementu option výše popsaná syntaxe testu nebude fungovat.

checkbox a radio

Když dodržíme defaultní volbu v prvku radio, pak vždy je vybraná nějaká platná hodnota a testování nemá příliš smysl.

Kontrola čísel a datumu

Ověření platnosti zapsaného desetinného čísla, nebo datumu není zcela triviální, protože se uplatňuje nastavení národních zvyklostí (na klientovi i na serveru). Této problematice se budeme věnovat v samostatných článcích.

Ověření uživatele

Při generování HTML kódu pro formuláře nejdříve ověřuji uživatelská práva k editování formuláře. Na straně serveru využiji metodou popsanou v článku jednotné přihlášení. Podle výsledku testu ověření identity a role uživatele zobrazím buď odesílací tlačítko, nebo zprávu že aktuální uživatel nemá přidělena práva pracovat s tímto formulářem. To má následující výhodu. Každý uživatel si může prohlédnout a vyzkoušet editování formulářů nanečisto a lépe pochopit celou aplikaci. V případě změny pracovního zařazení je tento pracovník již zaučený a správce aplikace jen změní přístupová práva v tabulce uživatelů.

Serverový skript po přijetí dat formuláře a před updatem databáze musí opět provést validaci přístupových práv uživatele který formulář odeslal. Validaci uživatele server musí provést protože podvrhnout formulář nebývá složité. Serverový skript by měl také znovu ověřit zda formulářová data jsou kompletní a validní pro případ kdy formulář byl odeslán bez validace. Při zjištěném pokusu o neautorizovaný přístup by měl být uživatel přesměrován na stránku s upozorněním na pokus o porušení přístupových práv.

Použití VBScriptu

Protože v logu nacházím často vyhledávací dotazy na ověřování formuláře pomocí VBScriptu, uvedu řešení, které jsem kdysi používal a nyní jej považuji za prasárnu. POZOR funguje to jen v MSIE. Ostatní browsery se budou zlobit. Některé funkce VBScriptu jsou velice lákavé k použití díky své jednoduchosti. Jako příklad uvedu funkci k ověření platného datumu IsDate(). Validační skript může být celý napsán ve VBScriptu, nebo je možné z JavaScriptu volat VBScriptové funkce tak, jak je naznačeno v ukázce. Následuje příklad jak nikdy nepsat webovou aplikaci!!!


<script type="text/javascript">
function checkForm(frm) {
  ...
  // --- kontrola datumu voláním funkce ve Visual Basic Script ---
  if(checkDate(frm.term.value) == false) {
    alert("chybně vyplněn termín");
    return false;
  }
  return true;
}
</script>

<script type="text/VBscript">
FUNCTION checkDate(ByVal dt)
  checkDate = IsDate(dt)
END FUNCTION
</script>

VBScript funkce IsDate() testuje datum i čas z jednoho vstupního textového pole, ale pozor na automatické přepínání mezi evropským a americkým datumem. Např. datum 1.13.2007 je považováno za správné a po převodu VBS funkcí Cdate() obdržíme datum 13.1.2007 díky automatické záměně dne a měsíce. Zda toto chování považujete za přípustné, ponechám na Vás.

updated 08.12.2007