Blazor有效提交后添加自定义验证消息的实现问题

问题根源 #

你的代码存在两个核心问题：

1. EditContext实例不匹配：你手动创建了_editContext并关联了ValidationMessageStore，但EditForm实际使用的是基于Model="@user"自动生成的EditContext，两者不是同一个实例，导致添加的验证消息无法同步到表单UI。
2. 未触发验证状态更新：即使关联了正确的EditContext，添加验证消息后没有通知EditContext状态变更，UI不会自动刷新显示新的错误信息。

修复代码 #

1. 修改EditForm标记 #

将原来的Context="_editContext"替换为传递你自定义的EditContext实例，确保表单和验证消息使用同一个上下文：

<EditForm EditContext="@_editContext" OnValidSubmit="@HandleValidSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />
    <div class="form-group">
        <label for="username">Benutzername</label>
        <InputText id="username" class="form-control" @bind-Value="@user.Name" />
        <ValidationMessage For="@(() => user.Name)" />
    </div>

    <div class="form-group">
        <label for="password">Nachname</label>
        <InputText id="password" class="form-control" @bind-Value="@user.Nachname" />
        <ValidationMessage For="@(() => user.Nachname)" />
    </div>

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

2. 完善HandleValidSubmit方法 #

添加验证消息后，需要清空旧消息、标记表单为无效并触发状态更新：

@code {
    private UserEntity user = new UserEntity();
    private ValidationMessageStore _validationMessageStore;
    private EditContext _editContext;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(user);
        _validationMessageStore = new ValidationMessageStore(_editContext);
    }

    private void HandleValidSubmit()
    {
        // 清空之前的验证消息，避免重复显示
        _validationMessageStore.Clear();

        // 自定义验证逻辑（示例：检查Nachname是否为空）
        if (string.IsNullOrWhiteSpace(user.Nachname))
        {
            _validationMessageStore.Add(() => user.Nachname, "Der Nachname ist erforderlich");
        }

        // 模拟数据库检查：比如判断用户名是否已存在
        if (user.Name == "test")
        {
            _validationMessageStore.Add(() => user.Name, "Benutzername bereits vergeben");
        }

        // 如果存在验证错误，标记表单为无效并刷新UI
        if (_validationMessageStore.Count > 0)
        {
            _editContext.MarkAsUnmodified();
            _editContext.NotifyValidationStateChanged();
            return;
        }

        // 验证通过，执行后续业务逻辑（比如保存到数据库）
        // ...
    }
}

关键说明 #

• EditContext="@_editContext"：确保表单使用你创建的EditContext实例，和ValidationMessageStore关联的上下文一致。
• _validationMessageStore.Clear()：每次提交前清空旧的验证消息，避免重复显示。
• _editContext.MarkAsUnmodified()：将表单标记为未修改，阻止表单继续执行“有效提交”的后续流程。
• _editContext.NotifyValidationStateChanged()：通知UI验证状态发生变化，触发错误消息的渲染。

内容的提问来源于stack exchange，提问作者Beeman