MudBlazor弹窗内EditForm结合FluentValidation验证未阻止提交问题

你当前的问题核心是点击提交按钮时未触发EditForm的校验逻辑就直接关闭了弹窗，可通过以下两种方案修改：

方案1：使用EditForm自带的提交校验逻辑（推荐） #

直接复用EditForm内置的校验触发逻辑，只有校验通过才会执行提交操作，改动最小：

修改BookDialog.razor代码 #

<MudDialog>
    <DialogContent>
        <!-- 新增OnValidSubmit事件绑定，校验通过后才会触发Submit方法 -->
        <EditForm Model="@model" OnValidSubmit="Submit">
        <FluentValidationValidator />
        <MudTextField Label="@L[\"Code\"]" @bind-Value="model.Code" For="() => model.Code" />
        <MudTextField Label="@L[\"Title\"]" @bind-Value="model.Title" For="() => model.Title" />
        </EditForm>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <!-- 把按钮类型改为Submit，去掉原来的OnClick绑定，点击后会自动触发EditForm的提交流程 -->
        <MudButton Color="MudBlazor.Color.Primary" ButtonType="ButtonType.Submit">Ok</MudButton>
    </DialogActions>
</MudDialog>
@code{
    [Parameter]
    public BookInfo model { get; set; }
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    private void Cancel()
    {
        MudDialog.Cancel();
    }
    // 只有校验通过后才会进入该方法
    private void Submit()
    {
        MudDialog.Close(DialogResult.Ok<BookInfo>(model));
    }
}

方案2：手动触发校验判断 #

如果需要保留按钮的OnClick绑定逻辑，可手动调用校验方法判断结果后再决定是否关闭弹窗：

修改BookDialog.razor代码 #

<MudDialog>
    <DialogContent>
        <!-- 新增EditForm实例引用 -->
        <EditForm Model="@model" @ref="editFormRef">
        <FluentValidationValidator />
        <MudTextField Label="@L[\"Code\"]" @bind-Value="model.Code" For="() => model.Code" />
        <MudTextField Label="@L[\"Title\"]" @bind-Value="model.Title" For="() => model.Title" />
        </EditForm>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="MudBlazor.Color.Primary" OnClick="Submit">Ok</MudButton>
    </DialogActions>
</MudDialog>
@code{
    [Parameter]
    public BookInfo model { get; set; }
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    // 声明EditForm引用字段
    private EditForm editFormRef;
    
    private void Cancel()
    {
        MudDialog.Cancel();
    }
    private void Submit()
    {
        // 手动触发校验，校验通过才关闭弹窗
        if(editFormRef.Validate())
        {
            MudDialog.Close(DialogResult.Ok<BookInfo>(model));
        }
    }
}

补充说明 #

你当前校验提示可以正常显示，说明FluentValidation的注册和Validator配置已经正确，无需修改BookValidator.cs和其他注入逻辑。另外Index.razor中的dialogParameters首字母需要大写为DialogParameters，否则会编译报错。

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