Blazor：如何在EditForm提交后自动滚动到第一个错误位置？

本方案完全不需要提前为元素设置固定ID，仅依赖Blazor默认验证规则实现，对现有表单代码侵入性极低。

实现逻辑说明 #

Blazor原生表单验证会自动为验证失败的输入框添加.input-validation-error类名，为错误提示添加.validation-message类名，我们直接通过类选择器定位第一个错误元素即可，不需要硬编码ID。

完整实现步骤 #

步骤1：Blazor组件端配置EditContext与触发逻辑 #

如果你只需要提交表单时才滚动，不需要实时输入验证时触发滚动，使用以下代码：

<EditForm EditContext="_editContext" OnSubmit="HandleSubmit">
    <!-- 你的原有表单字段，无需做任何修改 -->
    <InputText @bind-Value="_model.UserName" />
    <ValidationMessage For="@(() => _model.UserName)" />
    
    <InputText @bind-Value="_model.Phone" />
    <ValidationMessage For="@(() => _model.Phone)" />
    
    <button type="submit">提交</button>
</EditForm>

@code {
    private EditContext _editContext;
    private TestModel _model = new();
    [Inject] private IJSRuntime JSRuntime { get; set; }
    // 标记是否是提交按钮触发的验证，避免实时验证误滚动
    private bool _isSubmitTriggered = false;

    protected override void OnInitialized()
    {
        _editContext = new EditContext(_model);
        // 监听验证状态变化事件
        _editContext.OnValidationStateChanged += async (s, e) =>
        {
            if (_isSubmitTriggered && _editContext.GetValidationMessages().Any())
            {
                // 调用JS执行滚动
                await JSRuntime.InvokeVoidAsync("scrollToFirstValidationError");
                _isSubmitTriggered = false;
            }
        };
    }

    private async Task HandleSubmit()
    {
        _isSubmitTriggered = true;
        // 手动触发全表单验证
        if (_editContext.Validate())
        {
            // 验证通过后的提交逻辑
            _isSubmitTriggered = false;
        }
    }

    // 你的表单模型
    public class TestModel
    {
        [Required(ErrorMessage = "用户名不能为空")]
        public string UserName { get; set; }
        
        [Phone(ErrorMessage = "手机号格式不正确")]
        public string Phone { get; set; }
    }
}

步骤2：添加通用JS滚动方法 #

将以下JS代码添加到你的项目入口文件中：

• Blazor WebAssembly项目添加到wwwroot/index.html
• Blazor Server项目添加到Pages/_Layout.cshtml / Pages/_Host.cshtml

function scrollToFirstValidationError() {
    // 查找第一个验证失败的输入框
    const firstErrorInput = document.querySelector('.input-validation-error');
    if (firstErrorInput) {
        // 平滑滚动到错误输入框，滚动到视口中间位置
        firstErrorInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
        // 可选：自动聚焦到错误输入框，方便用户直接修改
        firstErrorInput.focus();
    }
}

你可以根据需要调整scrollIntoView的参数：

• 不需要平滑滚动可以把behavior: 'smooth'改为behavior: 'auto'
• 想滚动到视口顶部可以把block: 'center'改为block: 'start'

内容的提问来源于stack exchange，提问作者Mr.Technician