如何关注EditForm中的第一个无效字段

Question

我在Blazor中有一个表单，它使用了表单验证，如文档中所描述的。

当用户试图提交表单，但验证失败时，我想将用户的注意力集中在第一个无效的<input>字段上。

如何在WebAssemby中做到这一点？

Answer 1

您可以使用OnInvalidSubmit并访问EditContext。

<EditForm @ref=editForm OnInvalidSubmit=@FocusFirstError ... 
...
    <InputText @bind-Value=@inputRegisteredUser.GivenName
               @ref=inputGivenName
               class="form-control"
               placeholder="Given Name"
               id="GivenName" />
...

private EditForm editForm;
// repeat for all inputs
private InputText inputGivenName;


private async Task FocusFirstError()
{
    var editContext = editForm.EditContext;
       
    // repeat for all inputs
    if(editContext.GetValidationMessages(() => inputRegisteredUser.GivenName).Any())
    {
        await inputGivenName.Element.Value.FocusAsync();
        return;
    }
}