Blazor WebAssembly验证无法阻止第二个提交按钮触发逻辑

你的问题出在第二个按钮使用了@onclick事件，这个事件不受EditForm的验证流程管控——不管表单验证是否通过，@onclick绑定的方法都会直接执行，这就是为什么验证失败时控制台依然会输出SaveAndGoToListAsync的原因。

而第一个按钮没有额外绑定@onclick，完全依赖EditForm的OnValidSubmit机制，只有当验证通过时才会触发对应的方法，这是符合预期的。

修复方案：手动触发验证并判断结果 #

我们可以通过EditContext手动触发表单验证，只有验证通过时才执行后续逻辑。具体修改步骤如下：

1. 修改EditForm绑定EditContext #

在组件代码中创建并绑定EditContext，替代直接绑定Model：

@page "/test"

<h3>test</h3>

<EditForm EditContext="editContext" OnValidSubmit="PostAsync" class="mt-5">
    <DataAnnotationsValidator></DataAnnotationsValidator>
    <ValidationSummary></ValidationSummary>

    <div class="row w-100">
        <div class="col-md-6">
            <div class="float-lg-right row">
                <div class="col-6 text-center">
                    <button type="submit" class="btn btn-success text-black w-100">Save</button>
                </div>
                <div class="col-6 text-center">
                    <!-- 移除@onclick的匿名委托，直接绑定方法 -->
                    <button type="submit" class="btn btn-success text-black w-100" @onclick="SaveAndGoToListAsync">Save & Go To List</button>
                </div>
            </div>
        </div>

        <div class="col-md-3 mb-3">
            <label for="MyName" class="col-form-label">My Name:</label>
            <InputText id="MyName" class="form-control" @bind-Value="model.MyName"></InputText>
            <ValidationMessage For="@(()=>model.MyName)"></ValidationMessage>
        </div>
    </div>
</EditForm>

@code {
    private TestModel model;
    private EditContext editContext; // 新增EditContext

    public Test()
    {
        model = new();
        editContext = new EditContext(model); // 初始化EditContext
    }

    private void PostAsync()
    {
        Console.WriteLine("PostAsync");
    }

    private async Task SaveAndGoToListAsync()
    {
        // 手动触发表单验证
        if (editContext.Validate())
        {
            Console.WriteLine("SaveAndGoToListAsync");
            // 这里添加保存和跳转列表的逻辑
        }
    }
}

2. 原理说明 #

• editContext.Validate()会触发Data Annotation验证，同时页面上的ValidationSummary和ValidationMessage会自动显示错误信息。
• 只有当验证返回true（即所有验证规则通过）时，才会执行控制台输出和后续业务逻辑。
• 保留type="submit"确保点击按钮时依然会触发表单的UI验证反馈（比如输入框变红、显示错误提示）。

另一种方案：利用EditForm的提交事件区分按钮（.NET 6+） #

如果你的项目基于.NET 6或更高版本，可以通过SubmitEventArgs获取触发提交的按钮，在统一的OnValidSubmit方法里区分处理逻辑：

<EditForm Model="model" OnValidSubmit="HandleValidSubmit" class="mt-5">
    <!-- ... 其他内容不变 ... -->
    <button type="submit" class="btn btn-success text-black w-100" data-action="save">Save</button>
    <button type="submit" class="btn btn-success text-black w-100" data-action="saveAndGo">Save & Go To List</button>
    <!-- ... 其他内容不变 ... -->
</EditForm>

@code {
    // ... 其他代码不变 ...

    private void HandleValidSubmit(SubmitEventArgs e)
    {
        var action = (e.Submitter as ElementReference)?.GetAttributeAsync("data-action").Result;
        switch(action)
        {
            case "save":
                Console.WriteLine("PostAsync");
                break;
            case "saveAndGo":
                Console.WriteLine("SaveAndGoToListAsync");
                // 跳转逻辑
                break;
        }
    }
}

这种方式更符合EditForm的原生设计，把所有提交逻辑统一到OnValidSubmit中管理。

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