3. diel - Validácia formulárov v ASP.NET

V minulej lekcii, Obsluha formulárov v ASP.NET , sme sa naučili PostBack a naprogramovali sme jednoduchú kalkulačku. V dnešnom C# .NET tutoriálu sa zameriame na validator.

Keď do našej kalkulačky nezadáme žiadne čísla a formulár odošleme nevyplnený:

, Celá aplikácia spadne na chybu parsovanie na riadku:

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

Formulár totiž chýba validator a nikde sa nekontroluje, či sú zadané zmysluplné hodnoty. Aj keď je zadávacie TextBox v móde number, môžeme ho odoslať buď nevyplnený alebo si dokonca pozmeniť zdrojový kód stránky, prepnúť ho na iný mód a odoslať namiesto čísla text. Aplikácia opäť v lepšom prípade spadne s chybou, v tom horšom napr. Uloží nejaký nezmysel do databázy.

Validácia

Aby sme týmto situáciám predišli, vybavíme každý formulár validator. Validácia webových aplikácií prebieha na strane servera i klienta a mala by byť prítomná v každom formulári.

Klientská validácia

Validácia na strane klienta (používateľa s prehliadačom) nedovolí odoslať formulár na server, kým nie je správne vyplnený. Šetrí sa tak záťaž servera, pretože sa nemusí zaoberať každou chybou, ktorú užívateľ urobí. Používateľovi sa zas chyba zobrazí rýchlejšie, než keby sa čakalo na odpoveď servera.

Klientskú validáciu predtým vykonával iba JavaScript, s príchodom HTML 5 sa veľa formulárových polí validuje samo, napr. Do inputu typu number možné zadať iba číslo.

Keďže je validácia prítomná na strane klienta, možno validátor ľahko obísť. Či už nechtiac (prehliadač používateľa niečo nepodporuje alebo má vypnutý JavaScript) alebo zámerne (používateľ zmení kód formulára predtým, než ho odošle na server, typicky vymaže validačný kód alebo dokonca zmení typy vstupných polí). Z tohto dôvodu je klientska validácia iba doplnková a v podstate by sme sa bez nej obišli. Validovať musíme hlavne na serveri.

Validácie na serveri

Akonáhle formulár dorazí na server, je ho treba zvalidovat aj tu a to s použitím úplne rovnakých pravidiel, ako na strane klienta. Akonáhle sú hodnoty overené, môžeme dáta ďalej spracovávať. V opačnom prípade ASP.NET zobrazí používateľovi chybové hlášky a donúti ho chyby opraviť.

Validator

V Toolbox nájdeme hneď niekoľko validátorov, pripravených pre bežné použitie. Stačí ich len nakliknúť k danému vstupnému poli a nastaviť. Validácia neskôr prebehne plne automaticky a to aj na strane klienta, aj na strane servera.

V ToolBox nájdeme pod záložkou validácia nasledujúce kontrolky: CompareValidator, CustomValidator, RangeValidator, RegularExpres­sionValidator, RequiredFieldVa­lidator, ValidationSummary.

RequiredFieldVa­lidator

Validátor kontroluje, či je v poli zadaná hodnota, nejde teda odoslať prázdne. Otvoríme si projekt s našou kalkulačkou az ToolBox pretiahneme 3 tieto validator, ktoré umiestnime vedľa vbstupních polí pre čísla a operáciu.

Každému validátora následne nastavíme v Properties oknu 2 vlastnosti:

• ErrorMessage - Tu zadáme chybovú hlášku, ktorá sa vypíše na mieste s validátorom v prípade, že je pole zle zadané.
• ControlToValidate - Tu vyberieme kontrolku, ktorej hodnota sa má validovať.

Od verzie .NET 4.5 sa validácia robí tzv. Neobtruzivním módom. Pre nás to znamená, že by sme do projektu museli pridať knižnicu jQuery, čo nie je tak triviálne. Preto zatiaľ iba otvoríme súbor Web.config, kam pridáme element appSettings s kľúčom, ktorý tento mód validácie vypne. Obsah súboru Web.config by mal vyzerať 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>

So súborom Web.config sa v seriáli ešte stretneme, patrí do neho všetky nastavenia našej webovej aplikácie.

Keď projekt teraz spustíme a čísla nezadáme, vypíše sa nám chybová hláška:

Všimnite si, že sa stránka so zle vyplneným formulárom po pokuse o odoslanie neobnovuje, ale rovno vypíše chybu. To preto, že sa najprv validuje u klienta.

CompareValidator

Aj keď to vyzerá, že je už všetko v poriadku, tak nie je. Validátor kontroluje iba či je pole vyplnené. Keby sme HTML stránku prepísali tak, aby bolo pole textové a zadali doň napr. "Ahoj", nič netušiaci server by sa pokúsil číslo naparsovat a spadol by s chybou.

Z tohto dôvodu k obom poliam pridáme ešte CompareValidator. Ten umožňuje porovnávať hodnotu, ktorú užívateľ zadal. V našom prípade budeme chcieť porovnať, či je typ hodnoty Integer (celé číslo). Nastavíme teda nasledujúce vlastnosti:

• Operator - Operátor určuje ako hodnotu porovnávame. V našom prípade vyberieme DataTypeCheck, pretože chceme porovnávať typ hodnoty. Rovnako tak by sme mohli porovnávať aj samotnú hodnotu, môžeme zvoliť či má byť rovnaká, iná, menšie a väčšie ako vzorová hodnota. Tú bychomom zadali do vlastnosti ValueToCompare. Môžeme dokonca aj porovnávať hodnotu z inej kontrolky, tú zadáme do ControlToCompare.
• ControlToValidate - Rovnako ako u RequiredFieldVa­lidatoru vyplníme ktorú kontrolku validátor validuje.
• Type - keďže porovnávame dátový typ, nastavíme tu aký typ je validný. V našom prípade je to možnosť Integer.

Naša aplikácia je teraz blbuvzdorný Povedzme si ešte niečo o zvyšných Validator.

RangeValidator

Ako už z názvu vyplýva, tento validátor umožňuje kontrolovať rozsah hodnôt, ktorý je určený jeho vlastnosťami MinimumValue a MaximumValue. Mohli by sme tak napr. Validovať vek na rozmedzí 12-99 rokov, vždy sa totiž nájde niekto, kto vám zadá 0 alebo 200

RegularExpres­sionValidator

Obsah poľa môžeme samozrejme validovať aj na tzv. Regulárne výrazy. Môžeme tak jednoducho zistiť, či používateľ zadal platnú emailovú adresu, číslo kreditnej karty, telefónne číslo a podobne.

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

CustomValidator

Občas sa stane, že nestačí ani arzenál vyššie zmienených nastaviteľných validátorov a preto je nám umožnené napísať si validátor na mieru. Tomu odovzdáme 2 funkcie, prvý je názov JavaScriptové funkcie klientskej validácie, ktorý zadáme do vlastnosti ClientValidati­onFunction. Serverovú metódu nastavíme v OnServerValidate.

ValidationSummary

Táto kontrolka nie je priamo validátorom, ale slúži pre vypísanie chybových hlášok jednotlivých validátorov prehľadne na jedno miesto. Zvyčajne sa vkladá na začiatok formulára. Do vlastnosti Text jednotlivých validátorov sa v tejto situácii zvyčajne vkladá hviezdička. To je text, ktorý sa vypíše na mieste validátora v prípade chyby. Užívateľ tak vidia ktoré polia sú zle vyplnená a správy má na jednom mieste v hlavičke.

V budúcej lekcii, Masterpage a navigácia v ASP.NET , sa pozrieme na skladanie stránok pomocou masterpage. To je posledná vec, ktorú potrebujeme ovládať k tomu, aby sme sa mohli pustiť do nejakého väčšieho projektu. Zdrojové kódy dnešného projektu sú ako vždy v prílohe.

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.