Blazor web app in .NET 8 - validation form not working

Question

I'm creating a Blazor web app in .NET 8 with interactive server render mode.

I'm creating a form and I want to implement the validation, but I find myself in that when I post. They don't work.

My code is as follows:

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

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

     [Required]
     public int QsMin { get; set; }

     [Required]
     public int QsMax { get; set; }
} 

@page "/Create/{Id:int}"
@rendermode InteractiveServer
@inject Service _service;
  
<EditForm Model="Risk" OnValidSubmit="AddRiskLevel" FormName="Name">
   <DataAnnotationsValidator></DataAnnotationsValidator>
   <ValidationSummary class="text-danger"/>

    <div class="row g-3">

        <div class="col-sm-3">
           <label for="Level" class="form-label">Nivel</label>
           <InputText class="form-control" @bind-Value="Risk.Level" />
           <ValidationMessage For="@(() => Risk.Level)" />
        </div>

        <div class="col-sm-3">
           <label for="QsMin" class="form-label">Qs Min.</label>
           <InputNumber class="form-control" @bind-Value="Risk.QsMin" />
        </div>

        <div class="col-sm-3">
           <label for="QsMax" class="form-label">Qs Max.</label>
           <InputNumber class="form-control" @bind-Value="Risk.QsMax" />
        </div>

    </div>
    <div class="row g-3 pt-4">
        <div class="col-sm-1">
            <button type="button" class="btn btn-primary rounded-pill" @onclick="AddRiskLevel">Guardar</button>
        </div>
    </div>
</EditForm>

@code {
   [Parameter] public int Id { get; set; }

   [SupplyParameterFromForm] public LevelRiskDTO Risk { get; set; } = new();

   private void AddRiskLevel()
   {
      if (Id == 0)
          _service.CreateRisk(Risk);
   }
}

Could it be that in render server mode this does not work?

I created a project with WebAssembly render mode and it didn't work for me either

Answer 1

Your primary problem is the button. It needs a submit type.

<button type="submit" class="btn btn-primary rounded-pill" @onclick="AddRiskLevel">Guardar</button>

Also, you won't get messages on the ints as their default value is 0 [Required is already satisfied]. You need to allow nulls if you want to force the user to add a value, or provide some max and min value validation.

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

    [Required]
    public string? Level { get; set; }

    [Required]
    public int? QsMin { get; set; }

    [Required]
    public int? QsMax { get; set; }
}

Note you don't need [SupplyParameterFromForm] for a Blazor server page. That's for static Server Side Rendering.

Here's my demo page for reference:

@page "/"

<PageTitle>Home</PageTitle>


@page "/Create/{Id:int}"
@rendermode InteractiveServer

<EditForm Model="Risk" OnValidSubmit="AddRiskLevel">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <ValidationSummary class="text-danger" />

    <div class="row g-3">

        <div class="col-sm-3">
            <label for="Level" class="form-label">Nivel</label>
            <InputText class="form-control" @bind-Value="Risk.Level" />
            <ValidationMessage For="@(() => Risk.Level)" />
        </div>

        <div class="col-sm-3">
            <label for="QsMin" class="form-label">Qs Min.</label>
            <InputNumber class="form-control" @bind-Value="Risk.QsMin" />
        </div>

        <div class="col-sm-3">
            <label for="QsMax" class="form-label">Qs Max.</label>
            <InputNumber class="form-control" @bind-Value="Risk.QsMax" />
        </div>

    </div>
    <div class="row g-3 pt-4">
        <div class="col-sm-1">
            <button type="submit" class="btn btn-primary rounded-pill" @onclick="AddRiskLevel">Guardar</button>
        </div>
    </div>
</EditForm>

@code {
    [Parameter] public int Id { get; set; }

    private LevelRiskDTO Risk { get; set; } = new();

    private void AddRiskLevel()
    {
        if (Id == 0)
            this.Risk = new();
    }
}