AspNetCore.Docs/aspnetcore/blazor/forms-validation.md

title	author	description	monikerRange	ms.author	ms.custom	ms.date	uid
Blazor forms and validation	guardrex	Learn how to use forms and field validation scenarios in Blazor.	>= aspnetcore-3.0	riande	mvc	04/15/2019	blazor/forms-validation

Blazor forms and validation

By Daniel Roth and Luke Latham

Forms and validation are supported in Blazor using data annotations.

[!NOTE] Forms and validation scenarios are likely to change with each preview release.

The following ExampleModel type defines validation logic using data annotations:

using System.ComponentModel.DataAnnotations;

public class ExampleModel
{
    [Required]
    [StringLength(10, ErrorMessage = "Name is too long.")]
    public string Name { get; set; }
}

A form is defined using the <EditForm> component. The following form demonstrates typical elements, components, and Razor code:

<EditForm Model="@exampleModel" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <InputText id="name" bind-Value="@exampleModel.Name" />

    <button type="submit">Submit</button>
</EditForm>

@functions {
    private ExampleModel exampleModel = new ExampleModel();

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }
}

• The form validates user input in the name field using the validation defined in the ExampleModel type. The model is created in the component's @functions block and held in a private field (exampleModel). The field is assigned to the Model attribute of the <EditForm>.
• The Data Annotations Validator component (<DataAnnotationsValidator>) attaches validation support using data annotations.
• The Validation Summary component (<ValidationSummary>) summarizes validation messages.
• HandleValidSubmit is triggered when the form successfully submits (passes validation).

A set of built-in input components are available to receive and validate user input. Inputs are validated when they're changed and when a form is submitted. Available input components are shown in the following table.

Input component	Rendered as…
<InputText>	<input>
<InputTextArea>	<textarea>
<InputSelect>	<select>
<InputNumber>	<input type="number">
<InputCheckbox>	<input type="checkbox">
<InputDate>	<input type="date">

Input components provide default behavior for validating on edit and changing their CSS class to reflect the field state. Some components include useful parsing logic. For example, <InputDate> and <InputNumber> handle unparseable values gracefully by registering them as validation errors. Types that can accept null values also support nullability of the target field (for example, int?).

The following Starship type defines validation logic using a larger set of properties and data annotations than the earlier ExampleModel:

using System;
using System.ComponentModel.DataAnnotations;

public class Starship
{
    [Required]
    [StringLength(16, 
        ErrorMessage = "Identifier too long (16 character limit).")]
    public string Identifier { get; set; }

    // Optional (no data annotations)
    public string Description { get; set; }

    [Required]
    public string Classification { get; set; }

    [Range(1, 100000, ErrorMessage = "Accommodation invalid (1-100000).")]
    public int MaximumAccommodation { get; set; }

    [Required]
    [Range(typeof(bool), "true", "true", 
        ErrorMessage = "Form disallowed for unapproved ships.")]
    public bool IsValidatedDesign { get; set; }

    [Required]
    public DateTime ProductionDate { get; set; }
}

The following form validates user input using the validation defined in the Starship model:

@page "/FormsValidation"

<h1>Starfleet Starship Database</h1>

<h2>New Ship Entry Form</h2>

<EditForm Model="@starship" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <p>
        <label for="identifier">Identifier: </label>
        <InputText id="identifier" bind-Value="@starship.Identifier" />
    </p>
    <p>
        <label for="description">Description (optional): </label>
        <InputTextArea Id="description" bind-Value="@starship.Description" />
    </p>
    <p>
        <label for="classification">Primary Classification: </label>
        <InputSelect id="classification" bind-Value="@starship.Classification">
            <option value"">Select classification ...</option>
            <option value="Defense">Defense</option>
            <option value="Exploration">Exploration</option>
            <option value="Diplomacy">Diplomacy</option>
        </InputSelect>
    </p>
    <p>
        <label for="accommodation">Maximum Accommodation: </label>
        <InputNumber id="accommodation" 
            bind-Value="@starship.MaximumAccommodation" />
    </p>
    <p>
        <label for="valid">Engineering Approval: </label>
        <InputCheckbox id="valid" bind-Value="@starship.IsValidatedDesign" />
    </p>
    <p>
        <label for="productionDate">Production Date: </label>
        <InputDate Id="productionDate" bind-Value="@starship.ProductionDate" />
    </p>

    <button type="submit">Submit</button>

    <p>
        <a href="http://www.startrek.com/">Star Trek</a>, 
        &copy;1966-2019 CBS Studios, Inc. and 
        <a href="http://www.paramount.com">Paramount Pictures</a>
    </p>
</EditForm>

@functions {
    private Starship starship = new Starship();

    private void HandleValidSubmit()
    {
        Console.WriteLine("OnValidSubmit");
    }
}

The <EditForm> creates an EditContext as a cascading value that tracks metadata about the edit process, including what fields have been modified and the current validation messages. The <EditForm> also provides convenient events for valid and invalid submits (OnValidSubmit, OnInvalidSubmit). Alternatively, use OnSubmit to trigger the validation and check field values with custom validation code.

The Data Annotations Validator component (<DataAnnotationsValidator>) attaches validation support using data annotations to the cascaded EditContext. Enabling support for validation using data annotations currently requires this explicit gesture, but we're considering making this the default behavior that you can then override. To use a different validation system than data annotations, replace the Data Annotations Validator with a custom implementation. The ASP.NET Core implementation is available for inspection in the reference source: DataAnnotationsValidator/AddDataAnnotationsValidation. The ASP.NET Core implementation is subject to rapid updates during the preview release period.

The Validation Summary component (<ValidationSummary>) summarizes all validation messages, which is similar to the Validation Summary Tag Helper.

The Validation Message component (<ValidationMessage>) displays validation messages for a specific field, which is similar to the Validation Message Tag Helper. Specify the field for validation with the For attribute and a lambda expression naming the model property:

<ValidationMessage For="@(() => starship.MaximumAccommodation)" />

[!NOTE] Built-in input components have limitations that we expect to resolve in future releases. For example, you can't specify arbitrary attributes on the generated <input> tags. Build your own component subclasses to handle unavailable scenarios.