Issues with DataAnnotationsValidator and ValidationSummary

I am currently following a tutorial to learn Blazor (I'm working in 8.0).
I have a
MessageWall.razor
file, containing:
@page "/MessageWall"

<h3>MessageWall</h3>

<EditForm Model="model" OnValidSubmit="ValidSubmission" FormName="MessageWallForm">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <label for="message" class="form-label">@nameof(model.Message)</label>
    <InputText id="message" @bind-Value="model.Message" class="form-control" />

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

<ul>
    @foreach (string message in messages)
    {
        <li>@message</li>
    }
</ul>

@code {
    private MessageModel model = new();
    private List<string> messages = new();
    private void ValidSubmission()
    {
        messages.Add(model.Message);
        model = new();
    }
}


and a
MessageModel.cs
(contained within a
Models
folder, which I added to
@_Imports.razor
using
@using BlazorServerMessageWall.Models
):
using System.ComponentModel.DataAnnotations;

namespace BlazorServerMessageWall.Models;

public class MessageModel
{
    [Required]
    [StringLength(10, MinimumLength = 5)]
    public string Message { get; set; }

}


When I fire up the application, and enter a valid entry (eg; "hello", "123456") I get the attached image [posted below]. Really baffled here, read through the documentation. What am I doing incorrectly?
Was this page helpful?