Blazor Server问题：EditForm未触发提交方法且验证失效

问题根源 #

你的三个问题本质上是同一个原因：浏览器触发了表单的默认提交行为，导致页面刷新。页面刷新后Blazor组件重新初始化，之前的验证状态直接丢失，OnValidSubmit方法也来不及执行，同时浏览器默认提交会跳转到当前URL（带/?后缀）。另外，模型的Email字段未初始化，也会导致[Required]验证的判断逻辑出现偏差。

修复步骤 #

1. 阻止表单默认提交行为 #

给<EditForm>添加@onsubmit:preventDefault指令，强制阻止浏览器的默认提交行为，确保表单提交由Blazor框架处理：

<EditForm Model="@_subscribeCommand" OnValidSubmit="SubmitSubscribe" @onsubmit:preventDefault>

2. 初始化模型字段 #

修改SubscribeCommand类，将Email字段初始化为空字符串，确保[Required]和[EmailAddress]验证规则能正确触发：

public class SubscribeCommand
{
    [Required(ErrorMessage = "Email is required.")]
    [EmailAddress(ErrorMessage = "Email must be valid.")]
    public string Email { get; set; } = string.Empty;
}

3. 可选：添加验证汇总（辅助调试） #

可以在表单内添加<ValidationSummary />组件，集中展示所有验证错误，方便快速排查问题：

<EditForm Model="@_subscribeCommand" OnValidSubmit="SubmitSubscribe" @onsubmit:preventDefault>
    <DataAnnotationsValidator />
    <ValidationSummary /> <!-- 新增组件 -->
    <!-- 其余表单内容保持不变 -->
</EditForm>

修复后的完整代码 #

Form.razor:

@using AVA.ZICHT.WEBSITE.Data.Models

@page "/form"

<div class="container" data-aos="fade-up">

    <EditForm Model="@_subscribeCommand" OnValidSubmit="SubmitSubscribe" @onsubmit:preventDefault>
        <DataAnnotationsValidator />
        <ValidationSummary />
        <div class="form-group">
            <InputText @bind-Value="@_subscribeCommand.Email" class="form-control w-100" placeholder="Vul hier jouw e-mailadres in..." />
            <ValidationMessage For="() => _subscribeCommand.Email" />
        </div>
        <button type="submit" class="btn btn-rounded btn-primary mt-2">Aanmelden</button>
    </EditForm>
</div>

@code {
    private SubscribeCommand _subscribeCommand = new();

    private void SubmitSubscribe()
    {
        Snackbar.Add("Valid submit!...", Severity.Success);
    }
}

SubscribeCommand.cs:

public class SubscribeCommand
{
    [Required(ErrorMessage = "Email is required.")]
    [EmailAddress(ErrorMessage = "Email must be valid.")]
    public string Email { get; set; } = string.Empty;
}

验证效果说明 #

• 输入无效邮箱（如"lorem ipsum"）时，[EmailAddress]验证规则会触发，显示对应的错误提示；
• 留空提交时，[Required]验证规则会触发，显示必填项错误；
• 点击提交按钮后，不再触发浏览器跳转，而是执行OnValidSubmit绑定的SubmitSubscribe方法，显示成功提示。

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