Blazor：如何滚动到编辑表单中的第一个错误？答案

【问题标题】：Blazor: How to scroll to first error in edit form?Blazor：如何滚动到编辑表单中的第一个错误？
【发布时间】：2021-07-13 16:40:42
【问题描述】：

我有一个包含大量字段的编辑表单。如果用户出错并尝试提交表单，他们必须手动滚动以查看错误。使用 javascript，可以这样做：

var element = document.getElementById("content");
element.scrollIntoView();

在 blazor 中，如果必须，我可以使用 JS，但我不一定有要滚动到的 ID。

有没有一种好方法可以在提交时滚动到编辑表单中的第一个错误？

【问题讨论】：

见stackoverflow.com/questions/55186784/…，我认为它会回答你的问题
这是朝着正确方向迈出的一步，但它假设我有一个特定的 ID。我不知道编辑表单中第一个有错误的元素的 ID，如果它甚至有一个我可以参考的 ID。
您特别说“滚动到页面顶部以查看错误”，因此在页面顶部设置一个 ID，例如 <span>，甚至可能是 EditForm。如果你想滚动到第一个错误，那就有点棘手了！您需要为每个 ValidationMessage 提供一个基于约定的 id，例如“id-xxxxx”，其中 xxxx 是参数名称，在验证存储中查找错误消息，从 Field identifier 中计算出验证消息 id 和转到第一个。
糟糕！我的意思是“用户必须滚动到顶部”意味着用户必须手动执行该操作（无论是一直到顶部还是只是第一个错误）。我正在使用 MudBlazor 库，因此我没有传统的 ValidationMessages，因为每个文本字段都内置了验证支持。我会继续想办法让这项工作......
您解决了吗？我正在尝试做同样的事情，并认为我可以使用 var element = document.getElementsByClassName("validation-message")[0] 从 OnInvalidSubmit 调用 javascript。问题是当 JS 代码被触发时，验证还没有被渲染，所以元素是 null

标签： blazor blazor-editform js-scrollto

【解决方案1】：

这是我完成它的方法。我在 EditForm 上使用 OnInvalidSubmit。我的 ValidationMessage 控件添加了“validation-message”类，因此我滚动到找到的第一条错误消息的父元素，您可能需要根据您的 HTML 向上移动一个额外的节点。

我为我的 Blazor 页面创建了一个类来继承

public class FormBase : ComponentBase
{
    [Inject]
    protected IJSRuntime JSRuntime { get; set; } = null!;

    internal async Task HandleInvalidSubmit()
    {
        await JSRuntime.InvokeVoidAsync("scrollToFirstError");
    }
}

然后在 razor 页面中继承，并将 OnInvalidSubmit 添加到 EditForm

@inherits FormBase

<EditForm EditContext="editContext" OnInvalidSubmit="@HandleInvalidSubmit">

我的 JavaScript 如下。我添加了 500 毫秒的延迟，因此页面有时间在调用 getElementsByClassName 之前添加错误消息

function scrollToFirstError() {

    delay(500).then(() => {

        var element = document.getElementsByClassName("validation-message")[0];
        if (element != null) {
            element.parentNode.scrollIntoView();
        }

    });
}

function delay(time) {
    return new Promise(resolve => setTimeout(resolve, time));
}

【讨论】：