JellyPot umí data zaslaná formulářem validovat a v případě chybně vyplněného formuláře zobrazit patřičné chybové hlášky. Pravidla pro validaci se definují u jednotlivých polí formuláře pomocí atributu validateAs. Možné hodnoty tohoto atributu jsou:
- None – výchozí chování, stejně jako pokud není atribut
validateAsvůbec uveden. Neprovádí se žádné ověření dat. - NotEmpty – pole nesmí být prázdné, musí obsahovat alespoň jeden znak. Za takové znaky nejsou považovány tzv. bílé znaky (mezery, tabulátory atp). Tj. pole vyplněné pouze mezerami je v tomto případě nevalidní.
- Int (IntOrEmpty) – pole musí obsahovat celé číslo (kladné, záporné) nebo nulu (případně zůstat prázdné).
- Decimal (DecimalOrEmpty) – pole musí obsahovat celé nebo desetinné číslo (případně zůstat prázdné). Jako desetinná čárka může být použitá čárka i tečka, mezery vložené mezi číslice nejsou rozhodující.
- Date (DateOrEmpty) – pole musí obsahovat platné datum (případně zůstat prázdné). Možné formáty zadání jsou d.m, d/m, d.m.yyyy, d/m/yyyy
- Email (EmailOrEmpty) – pole musí obsahovat řetězec, který je možné interpretovat jako mailovou adresu (případně zůstat prázdné).
- RegExp – hodnota pole je ověřena proti regulárnímu výrazu, který je potřeba zapsat do atributu
validateData. Regulární výraz je potřeba zapsat v syntaxi platné pro Microsoft .NET Framework. - Psc (PscOrEmpty) – pole musí obsahovat české nebo slovenské poštovní směrovací číslo (případně zůstat prázdné). Poštovním směrovacím číslem se rozumí skupina pěti číslic zadaná buď s mezerou nebo bez.
- Telefon (TelefonOrEmpty) – pole musí obsahovat platné české nebo slovenské telefonní číslo (případně zůstat prázdné). Ověřuje se zápis devíti číslic, s možností zápisu předvolby +420 nebo +421, přičemž mezery nejsou rozhodující.
- Ico (IcoOrEmpty) – pole musí obsahovat platné IČ organizace (případně zůstat prázdné). Hodnota musí obsahovat osm číslic a platný kontrolní součet, přičemž mezery nejsou rozhodující.
Při odeslání formuláře na server JellyPot ověří obsah všech polí, které mají uvedený atribut validateAs. Pokud některé validací neprojde, přidělí se mu CSS třída notValid a zobrazí se chybová hláška, kterou jsme zapsali do atributu errTextValue (můžeme ji také umístit do textového souboru a do atributu errText zadat cestu k ní). Tyto chyby poté zobrazí control <f:ErrMsgs>.
Náš kontaktní formulář na stránce "O autorovi" bychom o validaci rozšířili takto:
...
<form method="post" runat="server">
<f:EmailForm runat="server"
id="contact"
targetCollection="message"
emailTemplate="Forms/Contact">
<formTemplate>
<label>
Vaše jméno*
<f:input runat="server"
id="name"
targetField="name"
validateAs="NotEmpty"
errTextValue="Jméno musíte zadat" />
</label>
<label>
Email*
<f:input runat="server"
id="email"
targetField="email"
validateAs="Email"
errTextValue="Není platný email" />
</label>
<label>
Zpráva
<f:textarea runat="server"
id="message"
targetField="message"
validateAs="NotEmpty"
errTextValue="Zprávu musíte zadat" />
</label>
<f:errMsgs runat="server" tag="p" separator="<br />" />
<f:sendButton runat="server" textValue="Odeslat" />
</formTemplate>
<sentTemplate>
<p>Zpráva byla odeslána. Díky!</p>
</sentTemplate>
</f:EmailForm>
</form>
...
Všimněte si controlu <f:errMsgs> - ten vypíše případné chyby při validaci. Bude-li chyb více, budou od sebe odděleny tagem <br />.
Validace formuláře pro poslání příspěvku do diskuse by byla velmi podobná, tu necháme na vás.
Inline validace pomocí JS
Samozřejmě je mnohem lepší uživatele o případných chybách informovat ihned a nečekat na odeslání formuláře na server. K tomu účelu perfektně poslouží javascriptová inline validace. Jen pozor, i v takovém případě je dobré data zkontrolovat také na serveru – pro případ, že uživateli nefunguje javascript. Existuje řada knihoven a pluginů, které obstarávají inline validaci. My používáme vlastní jQuery plugin, který jsme si napsali tak, aby splňoval naše mnohdy velmi speciální požadavky a abychom jej snadno mohli rozšiřovat o další způsoby validace. Plugin včetně dokumentace naleznete na GitHub JellyPot.