MudForm无实时验证反馈且提交时误判表单有效问题求助

问题现象 #

配置带实时验证的MudForm时，验证器类的提示消息未在表单字段输入有误时自动弹出；此外，存在验证错误时提交表单，表单仍被判定为有效，不符合预期。

现有代码 #

验证器类代码 #

public class CompanyUserValidator : AbstractValidator<CompanyUser>
{
    public CompanyUserValidator()
    {
        RuleFor(x => x.FirstName).NotEmpty().WithMessage("bla bla bla");
        // 其他验证规则...
    }

    public Func<object, string, Task<IEnumerable<string>>> ValidateValue => async (model, propertyName) =>
    {
        var result = await ValidateAsync(ValidationContext<CompanyUser>.CreateWithOptions((CompanyUser)model, x => x.IncludeProperties(propertyName)));
        if (result.IsValid)
            return Array.Empty<string>();
        return result.Errors.Select(e => e.ErrorMessage);
    };
}

表单代码 #

<MudForm Model="@companyUser" @ref="form" Validation="@(validator.ValidateValue)" ValidationDelay="0">
    <MudGrid Style="padding: 12px;">
        <MudItem xs="12" sm="6"><MudTextField T="string" @bind-Value="companyUser.FirstName" Label="Fornavn" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.FirstName)" /></MudItem>
        <MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.LastName" Label="Etternavn" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.LastName)" /></MudItem>
        <MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Name" Label="Firma navn" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.Name)" /></MudItem>
        <MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Number" @bind-Value="companyUser.CompanyNumber" Label="Organisasjonsnummer" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.CompanyNumber)" /></MudItem>
        <MudItem xs="12" sm="12" md="4"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Address.StreetAddress" Label="Adresse" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.Address.StreetAddress)" /></MudItem>
        <MudItem xs="12" sm="6" md="4"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Address.PostalCode" Label="Postkode" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.Address.PostalCode)" /></MudItem>
        <MudItem xs="12" sm="6" md="4"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Address.City" Label="Poststed" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.Address.City)" /></MudItem>
        <MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.Email" Label="E-post" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.Email)" /></MudItem>
        <MudItem xs="12" sm="6"><MudTextField InputType="@InputType.Text" @bind-Value="companyUser.PhoneNumber" Label="Mobilnummer" Variant="Variant.Outlined" Immediate="true" For="@(() => companyUser.PhoneNumber)" /></MudItem>
        <MudItem xs="12" sm="12">
            <MudButton ButtonType="ButtonType.Button" OnClick="@((e) => ValidateForm())" Variant="Variant.Outlined" Color="Color.Primary">Registrer deg</MudButton>
        </MudItem>
    </MudGrid>
</MudForm>

修复方案 #

1. 修复实时验证提示不显示问题 #

当前ValidateValue委托使用ValidationContext.CreateWithOptions的IncludeProperties方法，无法正确处理嵌套属性（如Address.StreetAddress）的路径匹配，导致验证规则不生效。修改委托实现：

public Func<object, string, Task<IEnumerable<string>>> ValidateValue => async (model, propertyName) =>
{
    var instance = (CompanyUser)model;
    var context = new ValidationContext<CompanyUser>(instance)
    {
        MemberName = propertyName
    };
    var result = await ValidateAsync(context);
    return result.IsValid ? Array.Empty<string>() : result.Errors.Select(e => e.ErrorMessage);
};

2. 修复表单错误时仍可提交问题 #

方案一：手动验证逻辑修正

确保ValidateForm方法正确调用MudForm的验证接口，并根据结果拦截提交：

private async Task ValidateForm()
{
    var validationResult = await form.ValidateAsync();
    if (!validationResult.IsValid)
    {
        // 验证失败，终止提交流程
        return;
    }
    // 验证通过，执行后续提交逻辑
}

方案二：使用MudForm原生提交机制

将按钮改为ButtonType.Submit，绑定OnValidSubmit事件让MudForm自动处理验证：

修改表单代码：

<MudForm Model="@companyUser" @ref="form" Validation="@(validator.ValidateValue)" ValidationDelay="0" OnValidSubmit="@HandleValidSubmit">
    <!-- 字段部分不变 -->
    <MudItem xs="12" sm="12">
        <MudButton ButtonType="ButtonType.Submit" Variant="Variant.Outlined" Color="Color.Primary">Registrer deg</MudButton>
    </MudItem>
</MudForm>

添加后台处理方法：

private async Task HandleValidSubmit()
{
    // 验证通过后的业务逻辑
}

3. 基础检查项 #

• 确认页面中已正确初始化验证器和模型实例：

  private CompanyUserValidator validator = new CompanyUserValidator();
  private CompanyUser companyUser = new CompanyUser();
  private MudForm form;
  

• 确保FluentValidation与MudBlazor版本兼容，优先使用最新稳定版。

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