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 : [email protected])")]
        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.

tomRedox · Accepted Answer · 2020-06-24 17:45:24Z

8

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.

edited Jun 24, 2020 at 17:45

answered Nov 15, 2019 at 12:54

tomRedox

30.8k30 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PepperTiger Over a year ago

It works now, thanks. Oddly, the [DataType(DataType.EmailAdress)] attribute doesn't work but surely i'm misunderstanding its function.

tomRedox Over a year ago

@PepperTiger DataType is for formatting rather than validation. The validation annotation is [EmailAddress] so add that too and it should work as expected. More on that here: stackoverflow.com/a/8989157/1879019

tomRedox Over a year ago

@PepperTiger I can't find a list of just the validation attributes, but if you look for the ones that include "validate" in their descriptions in this list you should get a pretty good idea: learn.microsoft.com/en-us/dotnet/api/…

Collectives™ on Stack Overflow

Validation doesn't work on Blazor Server Side

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related