Blazor Form Validation

Blazor offers built-in support for validating user input on forms. This feature helps keep your application data accurate and ensures a consistent user experience. In this article, we will explore how to use Form Validation in Blazor applications.

Syntax

Below is the basic syntax to add Form Validation to a Blazor form:

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

     <!-- Form fields go here -->

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

Example

Let's consider a simple form that has a Name and Age input. We need to ensure that Name is not left blank and Age is a numeric value. The code for the form would look like:

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

    <div class="form-group">
        <label>Name:</label>
        <InputText id="name" class="form-control" @bind-Value="@myModel.Name"></InputText>
        <ValidationMessage For="@(() => myModel.Name)" />
    </div>

    <div class="form-group">
        <label>Age:</label>
        <InputNumber id="age" class="form-control" @bind-Value="@myModel.Age"></InputNumber>
        <ValidationMessage For="@(() => myModel.Age)" />
    </div>

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

Output

When the user submits the form, the OnValidSubmit event is triggered only if the form inputs are valid. If the inputs are invalid, they will be highlighted and appropriate error messages will be displayed near the input fields.

Explanation

In the above example, we have added DataAnnotationsValidator component to the form to automatically validate the form fields using the data annotation attributes. We have also added the ValidationSummary component to display a list of validation error messages.

Each input field has validation checks and error messages added using the For attribute of ValidationMessage. We have also bound the input fields to the properties of the myModel object using the @bind-Value directive.

The handleValidSubmit function is triggered if the form inputs are valid.

Use

Use the Blazor Form Validation feature to ensure that your user input is accurate, consistent, and error-free. It saves time and resources that would have been spent on detecting and fixing validation errors in client and server-side code.

Important Points

• Blazor Form Validation can be done using data annotation attributes
• Use the DataAnnotationsValidator component to validate the form automatically
• Use ValidationMessage and ValidationSummary components to display error messages

Summary

Blazor Form Validation helps keep your form data accurate and ensures that users have a consistent experience. Use built-in validation components to keep your application code simple and error-free.