Handling Form submission with Validation in Blazor

The EditForm component is Blazor’s approach to managing user-input in a way that makes it easy to perform validation against user input. It also provides the ability to check if all validation rules have been satisfied, and present the user with validation errors if they have not.

The EditForm provides the following callbacks for handling form submission:

  • Use OnValidSubmit to assign an event handler to run when a form with valid fields is submitted.
  • Use OnInvalidSubmit to assign an event handler to run when a form with invalid fields is submitted.
  • Use OnSubmit to assign an event handler to run regardless of the form fields’ validation status. The form is validated by calling EditContext.Validate in the event handler method. If Validate returns true, the form is valid.
@page "/"
@using System.ComponentModel.DataAnnotations

<EditForm Model="@person" OnSubmit="FormSubmit">
    <DataAnnotationsValidator/>
    <ValidationSummary/>
    <div class="mb-3">
        <label for="inputFirstName" class="form-label">First Name</label>
        <InputText @bind-Value="person.FirstName" class="form-control" id="inputFirstName"></InputText>
    </div>
    <div class="mb-3">
        <label for="inputLastName" class="form-label">Last Name</label>
        <InputText @bind-Value="person.LastName" class="form-control" id="inputLastName"></InputText>
    </div>
    <div class="mb-3">
        <label for="inputAge" class="form-label">Age</label>
        <InputNumber @bind-Value="person.Age" class="form-control" id="inputAge"></InputNumber>
    </div>

    <input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

<div>Form validation : @isFormValid</div>

@code
{

    private Person person = new();
    private bool isFormValid = false;

    public class Person
    {
        public int Id { get; set; }

        [Required(ErrorMessage = "First Name is empty")]
        public string? FirstName { get; set; }

        [Required(ErrorMessage = "Last Name is empty")]
        public string? LastName { get; set; }

        [Required]
        [Range(0, 150, ErrorMessage = "Age is not in range")]
        public int Age { get; set; } = 36;
    }

    private void FormSubmit(EditContext editContext)
    {
        if (editContext.Validate())
        {
            isFormValid = true;
        }
    }
}

You can use ValidationMessage Component instead of ValidationSummary Component to show error message for each field.

<EditForm Model="@person" OnSubmit="FormSubmit">
    <DataAnnotationsValidator/>
    <div class="mb-3">
        <label for="inputFirstName" class="form-label">First Name</label>
        <InputText @bind-Value="person.FirstName" class="form-control" id="inputFirstName"></InputText>
        <ValidationMessage For="() => person.FirstName"></ValidationMessage>
    </div>
    <div class="mb-3">
        <label for="inputLastName" class="form-label">Last Name</label>
        <InputText @bind-Value="person.LastName" class="form-control" id="inputLastName"></InputText>
        <ValidationMessage For="() => person.LastName"></ValidationMessage>
    </div>
    <div class="mb-3">
        <label for="inputAge" class="form-label">Age</label>
        <InputNumber @bind-Value="person.Age" class="form-control" id="inputAge"></InputNumber>
        <ValidationMessage For="() => person.Age"></ValidationMessage>
    </div>

    <input type="submit" class="btn btn-primary" value="Save"/>
</EditForm>

 

References
https://blazor-university.com/forms/handling-form-submission/
https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-6.0