How can I do form validation with MudBlazor?

user_14506230 0
Viewed 6120

I have built a nice looking register form with MudBlazor.

     <MudCard Class="signup-form">
        <MudCardContent>
           <form>
            <MudTextField Label="Username" />
            <MudTextField Label="Email" />
            <MudTextField Label="Password" />
            <MudTextField Label="Repeat password" />
          </form>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="Variant.Filled" Color="Color.Primary">Sign up</MudButton>
        </MudCardActions>
    </MudCard>

But how can I show validation errors when the user input is not sufficient or wrong? Could not find information on how to do that in MudBlazor.

mudblazor blazor validation forms
1 Answers

Form validation is documented well in the MudBlazor Form documentation. Here is how you do it with Blazor's built in validation mechanism which is probably the easiest for your use case:

<EditForm Model="@model" OnValidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />
    <MudCard Class="demo-form">
        <MudCardContent>
            <MudTextField Label="Username" HelperText="Max. 8 characters" @bind-Value="model.Username" For="@(() => model.Username)" />
            <MudTextField Label="Email" @bind-Value="model.Email" For="@(() => model.Email)" />
            <MudTextField Label="Password" HelperText="Choose a strong password" @bind-Value="model.Password" For="@(() => model.Password)" InputType="InputType.Password" />
            <MudTextField Label="Password" HelperText="Repeat the password" @bind-Value="model.Password2" For="@(() => model.Password2)" InputType="InputType.Password" />
        </MudCardContent>
        <MudCardActions>
            <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" Class="demo-form-button">Register</MudButton>
        </MudCardActions>
    </MudCard>    
</EditForm>

@code {
    RegisterAccountForm model = new RegisterAccountForm();

    public class RegisterAccountForm
    {
        [Required]
        [StringLength(8, ErrorMessage = "Name length can't be more than 8.")]
        public string Username { get; set; }

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

        [Required]
        [StringLength(30, ErrorMessage = "Password must be at least 8 characters long.", MinimumLength = 8)]
        public string Password { get; set; }

        [Required]
        [Compare(nameof(Password))]
        public string Password2 { get; set; }

    }

    private void OnValidSubmit(EditContext context)
    {
        // register the user
    }

}
user_2417400
Related