DotVVM - možnosti validace formulářů

Ještě neznáte framework DotVVM?

DotVVM podporuje model validace, které určitě znáte z jiných ASP.NET technologiích jako MVC, Web API,..

Příklad - máme jednoduchý formulář, kde zadáváme základní informace o uživateli - jméno, příjmení, email, které chceme validovat.


1. Data Annotations

Pomocí jednoduchých data annotations můžeme zvalidovat hodnoty v objektu, které přicházejí na server. DotVVM umí taky několik attributů přeložit přímo na klientské validace, takže pro jednoduché scénáře nepotřebujeme žádnou javascriptovou knihovnu na klientské validace.

public class UserForm
{
    [Required]
    public string FirstName { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    [EmailAddress]
    public string Email { get; set; }
}

Nebo si můžete napsat vlastní validační attribut poděděním třídy ValidationAttribute .


2. IValidatableObject

Objekt, který chceme validovat musí dědit z interface IValidatableObject, který implementuje metodu Validate.

public class UserForm : IValidatableObject
{
    [Required]
    public string FirstName { get; set; }
    [Required]
    public string LastName { get; set; }
    [Required]
    [EmailAddress]
    public string Email { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        if (FirstName.Contains("."))
        {
            yield return new ValidationResult("Error Message", new string[] { nameof(FirstName) });
        }
    }
}

3. Složitější validace

Pro složitější validace - potřebujeme ověřit data v databázi a na základě výsledku vyvolat validační chybu, můžeme využít extension metodu v DotVVM - AddModelError, která přiřadí chybovou hlášku k hodnotě.

Při zavolání metody Save se hodnota s emailem zkontroluje v databázi a pokud email již existuje, vytvoříme chybovou hlášku. Na konci je potřeba zavolat metodu FailOnInvalidModelState na Contextu, která ukončí request a vrátí response pro stránku.

public void Save()
{
    var emailExists = userService.CheckIfEmailExists(UserForm.Email);
    if (emailExists)
    {
        this.AddModelError(v => v.UserForm.Email, "Error message");
        Context.FailOnInvalidModelState();
    }
    ...
}

Výsledný zdrojový kód

Dothtml

<form Validator.InvalidCssClass="error">
    <div>
        <dot:TextBox Text="{value: UserForm.FirstName}" Validator.Value="{value: UserForm.FirstName}" />
    </div>
    <div>
        <dot:TextBox Text="{value: UserForm.LastName}" Validator.Value="{value: UserForm.LastName}" />
    </div>
    <div>
        <dot:TextBox Text="{value: UserForm.Email}" Validator.Value="{value: UserForm.Email}" />
    </div>
    <dot:Button Click="{command: Save()}" Text="Save" />
</form>

ViewModel

public class DefaultViewModel : MasterPageViewModel
{
    private readonly IUserService userService;
    public UserForm UserForm { get; set; } = new UserForm();
    public DefaultViewModel(IUserService userService)
    {
        this.userService = userService;
    }


    public void Save()
    {
        var emailExists = userService.CheckIfEmailExists(UserForm.Email);
        if (emailExists)
        {
            this.AddModelError(v => v.UserForm.Email, "The e-mail address is already registered!");
            Context.FailOnInvalidModelState();
        }
    }
}

Více o validacích v DotVVM si můžete přečíst zde.

Written on July 10, 2019