Validation doesn't work on Blazor Server Side

Question

I defined a form LogInForm.cs like this :

using System.ComponentModel.DataAnnotations;

namespace PollingInstitute.Data.LogIn
{
    public class LogInForm
    {
        [Required]
        [DataType(DataType.EmailAddress, ErrorMessage = "This field require a mail adress (example : abc@xyz.com)")]
        public string Mail { get; set; }

        [Required]
        [DataType(DataType.Password)]
        public string Password { get; set; }
    }
}

And a login screen LogIn.razor like this :

@page "/login"
@using PollingInstitute.Data.LogIn
@inject LogInService _LogInService

<h3>Login</h3>

<EditForm Model="@logInForm" OnValidSubmit="@TryLogIn">

    <div>
        <label>Mail Adress : </label><InputText @bind-Value="@logInForm.Mail"></InputText>
        <ValidationMessage For="@(()=>logInForm.Mail)"></ValidationMessage>
    </div>

    <div>
        <label>Password : </label><InputText @bind-Value="@logInForm.Password"></InputText>
        <ValidationMessage For="@(()=>logInForm.Password)"></ValidationMessage>
    </div>

    <div>

        @if (!IsDisabled)
        {
            <button type="submit">Submit</button>
        }
        else
        {
            <label>Please wait...</label>
        }
    </div>
    <ValidationSummary></ValidationSummary>
</EditForm>

@code {

    LogInForm logInForm = new LogInForm();
    protected bool IsDisabled { get; set; } = false;

    async void TryLogIn()
    {
        if (IsDisabled == true)
        {
            IsDisabled = true;
            StateHasChanged();
            bool result = (await _LogInService.TryLogIn(logInForm));
            Console.WriteLine("Logging status : " + (result ? "Sucess" : "Failure"));
            IsDisabled = false;
            StateHasChanged();
        }
    }

}

When I'm filling (or not) the fields, it's always indicating them as valid, even though it's supposed to be not valid.

I checked the _Imports.razor and it got the Microsoft.AspNetCore.Components.Forms library. I tried with Chrome and Firefox and it's always giving the same result. I checked if javascript was on, and it was.

So what I'm doing wrong ? Is there anything to do with my code ? Do I have to add something in the Startup.cs file ? I made a Blazor app as a tutorial using the validation system and it was working flawlessly.

Answer 1

I think the problem here is simply that you've forgotten to add the component which actually performs the validation. To fix that, add this line below your <EditForm Model="@logInForm" OnValidSubmit="@TryLogIn"> line:

      <DataAnnotationsValidator />

Also, the [DataType] attribute is for formatting rather than validation. The validation annotation for an email address is [EmailAddress], so add that too and it should work as expected. More on that here.

As a slight aside on this; I came from the WinForms world where validation often felt like an unknowable black box. In Blazor it's really well documented in the docs and also in the code, so if you want to learn more about it at any point it's actually possible. This blog by Steve Sanderson has some really good outline info in the "Blazor’s forms and validation extensibility" section.