Lekce 3 - Validace formulářů v ASP.NET

V minulé lekci, Obsluha formulářů v ASP.NET, jsme se naučili PostBack a naprogramovali jsme jednoduchou kalkulačku.

V dnešním C# .NET tutoriálu se zaměříme na validátory.

Když do naší kalkulačky nezadáme žádná čísla a formulář odešleme nevyplněný:

, celá aplikace spadne na chybu parsování na řádku:

int cislo1 = int.Parse(cislo1TextBox.Text);

Formulář totiž postrádá validátory a nikde se nekontroluje, zda jsou zadané smysluplné hodnoty. I když je zadávací TextBox v módu number, můžeme ho odeslat buď nevyplněný nebo si dokonce pozměnit zdrojový kód stránky, přepnout ho na jiný mód a odeslat místo čísla text. Aplikace opět v lepším případě spadne s chybou, v tom horším např. uloží nějaký nesmysl do databáze.

Validace

Abychom těmto situacím předešli, vybavíme každý formulář validátory. Validace webových aplikací probíhá na straně serveru i klienta a měla by být přítomna v každém formuláři.

Klientská validace

Validace na straně klienta (uživatele s prohlížečem) nedovolí odeslat formulář na server, dokud není správně vyplněný. Šetří se tak zátěž serveru, jelikož se nemusí zabývat každou chybou, kterou uživatel udělá. Uživateli se zas chyba zobrazí rychleji, než kdyby se čekalo na odpověď serveru.

Klientskou validaci dříve vykonával pouze JavaScript, s příchodem HTML 5 se spoustu formulářových polí validuje samo, např. do inputu typu number lze zadat pouze číslo.

Jelikož je validace přítomná na straně klienta, lze validátor snadno obejít. Ať již nechtěně (prohlížeč uživatele něco nepodporuje nebo má vypnutý JavaScript) nebo záměrně (uživatel změní kód formuláře předtím, než jej odešle na server, typicky vymaže validační kód nebo dokonce změní typy vstupních polí). Z tohoto důvodu je klientská validace pouze doplňková a v podstatě bychom se bez ní obešli. Validovat musíme hlavně na serveru.

Validace na serveru

Jakmile formulář dorazí na server, je jej třeba zvalidovat i zde a to s použitím úplně stejných pravidel, jako na straně klienta. Jakmile jsou hodnoty ověřené, můžeme data dále zpracovávat. V opačném případě ASP.NET zobrazí uživateli chybové hlášky a donutí jej chyby opravit.

Validátory

V Toolboxu nalezneme hned několik validátorů, připravených pro běžné použití. Stačí je jen nakliknout k danému vstupnímu poli a nastavit. Validace později proběhne plně automaticky a to i na straně klienta, i na straně serveru.

V ToolBoxu nalezneme pod záložkou validace následující kontrolky: CompareValidator, CustomValidator, RangeValidator, RegularExpres­sionValidator, RequiredFieldVa­lidator, ValidationSummary.

RequiredFieldVa­lidator

Validátor kontroluje, zda je v poli zadaná hodnota, nejde tedy odeslat prázdné. Otevřeme si projekt s naší kalkulačkou a z ToolBoxu přetáhneme 3 tyto validátory, které umístíme vedle vbstupních polí pro čísla a operaci.

Každému validátoru následně nastavíme v Properties oknu 2 vlastnosti:

• ErrorMessage - Zde zadáme chybovou hlášku, která se vypíše na místě s validátorem v případě, že je pole špatně zadané.
• ControlToValidate - Zde vybereme kontrolku, jejiž hodnota se má validovat.

Od verze .NETu 4.5 se validace dělá tzv. neobtruzivním módem. Pro nás to znamená, že bychom do projektu museli přidat knihovnu jQuery, což není tak triviální. Proto zatím pouze otevřeme soubor Web.config, kam přidáme element appSettings s klíčem, který tento mód validace vypne. Obsah souboru Web.config by měl vypadat asi takto:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
  <appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
  </appSettings>
</configuration>

Se souborem Web.config se v seriálu ještě setkáme, patří do něj veškerá nastavení naší webové aplikace.

Když projekt nyní spustíme a čísla nezadáme, vypíše se nám chybová hláška:

Všimněte si, že se stránka se špatně vyplněným formulářem po pokusu o odeslání neobnovuje, ale rovnou vypíše chybu. To proto, že se nejprve validuje u klienta.

CompareValidator

I když to vypadá, že je již vše v pořádku, tak není. Validátor kontroluje pouze zda je pole vyplněné. Kdybychom HTML stránku přepsali tak, aby bylo pole textové a zadali do něj např. "ahoj", nic netušící server by se pokusil číslo naparsovat a spadl by s chybou.

Z tohoto důvodu k oběma polím přidáme ještě CompareValidator. Ten umožňuje porovnávat hodnotu, kterou uživatel zadal. V našem případě budeme chtít porovnat, zda je typ hodnoty Integer (celé číslo). Nastavíme tedy následující vlastnosti:

• Operator - Operátor určuje jak hodnotu porovnáváme. V našem případě vybereme DataTypeCheck, protože chceme porovnávat typ hodnoty. Stejně tak bychom mohli porovnávat i samotnou hodnotu, můžeme zvolit zda má být stejná, jiná, menší a větší než vzorová hodnota. Tu bychomom zadali do vlastnosti ValueToCompare. Můžeme dokonce i porovnávat hodnotu z jiné kontrolky, tu zadáme do ControlToCompare.
• ControlToValidate - Stejně jako u RequiredFieldVa­lidatoru vyplníme kterou kontrolku validátor validuje.
• Type - jelikož porovnáváme datový typ, nastavíme zde jaký typ je validní. V našem případě je to možnost Integer.

Naše aplikace je nyní blbuvzdorná Řekněme si ještě něco o zbylých validátorech.

RangeValidator

Jak již z názvu vyplývá, tento validátor umožňuje kontrolovat rozsah hodnot, který je určený jeho vlastnostmi MinimumValue a MaximumValue. Mohli bychom tak např. validovat věk na rozmezí 12-99 let, vždy se totiž najde někdo, kdo vám zadá 0 nebo 200

RegularExpres­sionValidator

Obsah pole můžeme samozřejmě validovat i na tzv. regulární výrazy. Můžeme tak jednoduše zjistit, zda uživatel zadal platnou emailovou adresu, číslo kreditní karty, telefonní číslo a podobně.

Samotný výraz zadáme do vlastnosti ValidationExpres­sion.

CustomValidator

Občas se stane, že nestačí ani arzenál výše zmíněných nastavitelných validátorů a proto je nám umožněno napsat si validátor na míru. Tomu předáme 2 funkce, první je název JavaScriptové funkce klientské validace, který zadáme do vlastnosti ClientValidati­onFunction. Serverovou metodu nastavíme v OnServerValidate.

ValidationSummary

Tato kontrolka není přímo validátorem, ale slouží pro vypsání chybových hlášek jednotlivých validátorů přehledně na jedno místo. Obvykle se vkládá na začátek formuláře. Do vlastnosti Text jednotlivých validátorů se v této situaci obvykle vkládá hvězdička. To je text, který se vypíše na místě validátoru v případě chyby. Uživatel tak vidí která pole jsou špatně vyplněná a zprávy má na jednom místě v hlavičce.

V příští lekci, MasterPage a navigace v ASP.NET, se podíváme na skládání stránek pomocí MasterPage. To je poslední věc, kterou potřebujeme ovládat k tomu, abychom se mohli pustit do nějakého většího projektu. Zdrojové kódy dnešního projektu jsou jako vždy v příloze.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.