Validácia formulárov na klientovi v ASP.NET MVC

Formuláre tvorené v ASP.NET MVC frameworku priamo podporujú validáciu vstupných údajov pomocou atribútov dostupných v Data Annotations API (System.ComponentModel.DataAnnotations). Tieto atribúty vedia skontrolovať, či bola zadaná nejaká hodnota, či je vyhovujúcej dĺžky alebo ju skontroluje voči regulárnemu výrazu. Obrovská výhoda tohto API je v generovaní klientských JavaScriptových pravidiel, s ktorými sa formulár zvaliduje v prehliadači bez zbytočného post backu na server.

Validácia v prehliadači vyžaduje knižnice MicrosoftAjax.js a MicrosoftMvcValidation.js. Skripty si automaticky zistia, či na stránke sú nejaké validačné pravidlá a tie použijú. Aby sme nemuseli tieto pravidlá písať ručne, ASP.NET MVC má jednoduchý spôsob, ako ich vygenerovať: HtmlHelper.EnableClientValidation(). Keď je na stránke zapnutá validácia na strane klienta, pre každý formulár sa vygenerujú pravidlá pre tie položky, pre ktoré ste zavolali funkciu HtmlHelper.ValidationMessageFor(). Nedochádza teda ku validácii celého objektu, ale iba tých vlastností, ktoré môžu byť na stránke upravované (napríklad pri editácii objektu sa nemusí dať meniť jeho názov – keďže pre takéto pole nezavoláte HtmlHelper.EditorFor() a ani HtmlHelper.ValidationMessageFor(), nebude validácia chybne hlásiť, že žiaden názov nebol vyplnený).

Trieda označená validačnými atribútmi vyzerá takto:

public class Comment
{
    [Required]
    [StringLength(40, MinimumLength = 5, ErrorMessage = "Meno musí mať 5 až 40 znakov.")]
    public string Name { get; set; }

    [Required(ErrorMessage = "Zadajte váš e-mail.")]
    [RegularExpression(@"^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$", ErrorMessage = "Zadali ste nesprávny e-mail.")]
    public string Email { get; set; }

    [Required]
    [StringLength(140, MinimumLength = 5, ErrorMessage = "Správa musí mať 5 až 140 znakov.")]
    public string Text { get; set; }
}

Kód, ktorý zobrazí formulár môže byť takýto:

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcApplication1.Models.Comment>" %>
...
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm()) {%>

<fieldset>
    <legend>Fields</legend>

    <%= Html.EditorForModel() %>

    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

<% } %>

Výsledné JSON pravidlá si môžete pozrieť na adrese http://codepaste.net/7jvdtv.

Oveľa bohatšiu podporu pre validovanie formulárov má jQuery Validation plugin. ASP.NET MVC nemá na serverovej strane žiadnu podporu pre túto formu validácie, avšak priamo MVC Futures obsahuje knižnicu MicrosoftMvcJQueryValidation.js ktorá validačné pravidlá MVC frameworku premení na formát podporovaný v jQuery. V tomto prípade nie je potrebné používať MicrosoftMvcValidation.js súbor.

Pri validácii v ASP.NET MVC 2 RC2 môžete naraziť na problém so StringLengthAttribute a jeho MinimumLength vlastnosťou. Pretože táto bola pridaná v .NET 4.0 a MVC podporuje aj .NET 3.5, tak sa generuje pravidlo, ktoré neobsahuje MinimumLength hodnotu. Na serveri teda dôjde k plnej validácii, na klientovi iba čiastočnej. Toto je možné obísť použitím regulérnych výrazov, ale napísaním si vlastnej StringLengthAttributeAdapter triedy. (Je otázne, či táto chyba bude odstránená v release verzii.)

Pozrite si výsledný formulár s validáciou.

PS: Regulérny výraz na e-mailovú adresu som prevzal z RegExLib.com.