Forms and Validation in Blazor

Creating a Simple Form

Blazor makes it easy to create forms with two-way binding and submit events.

<EditForm Model="@user" OnValidSubmit="HandleSubmit">
    <InputText id="name" @bind-Value="user.Name" />
    <button type="submit">Submit</button>
</EditForm>

@code {
    User user = new User();

    void HandleSubmit()
    {
        Console.WriteLine("Form submitted");
    }
}

Form Validation

Blazor includes support for validation using data annotation attributes (DataAnnotations).

public class User
{
    [Required(ErrorMessage = "Name is required")]
    [StringLength(50, MinimumLength = 2)]
    public string Name { get; set; }

    [Required]
    [EmailAddress]
    public string Email { get; set; }

    [Range(18, 100)]
    public int Age { get; set; }
}

Complete Form Example

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

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

    <div class="form-group">
        <label for="email">Email:</label>
        <InputText id="email" @bind-Value="user.Email" class="form-control" />
        <ValidationMessage For="@(() => user.Email)" />
    </div>

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

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

@code {
    private User user = new();

    private async Task HandleValidSubmit()
    {
        // Form is valid, process the data
        await SaveUserData(user);
    }
}

Built-in Form Components

InputText

<InputText @bind-Value="model.Text" />

InputTextArea

<InputTextArea @bind-Value="model.Description" />

InputNumber

<InputNumber @bind-Value="model.Quantity" />

InputSelect

<InputSelect @bind-Value="model.Category">
    <option value="">Select a category...</option>
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
</InputSelect>

InputDate

<InputDate @bind-Value="model.Date" />

InputCheckbox

<InputCheckbox @bind-Value="model.IsSubscribed" />

Custom Validation

You can implement custom validation using IValidatableObject:

public class RegistrationModel : IValidatableObject
{
    public string Password { get; set; }
    public string ConfirmPassword { get; set; }

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
        if (Password != ConfirmPassword)
        {
            yield return new ValidationResult(
                "Passwords do not match",
                new[] { nameof(Password), nameof(ConfirmPassword) }
            );
        }
    }
}

Form Events

<EditForm Model="@model"
          OnValidSubmit="HandleValidSubmit"
          OnInvalidSubmit="HandleInvalidSubmit">
    <!-- Form fields -->
</EditForm>

@code {
    private async Task HandleValidSubmit()
    {
        // Handle valid form submission
    }

    private void HandleInvalidSubmit()
    {
        // Handle invalid form submission
    }
}