首先,我们需要在EditForm组件中添加一个OnInvalidSubmit事件。 在事件处理程序中,我们需要获取第一个非法字段并将其聚焦。下面是示例代码:
....
@code {
private async Task HandleInvalidSubmit(EditContext context)
{
var firstErrorField = context.GetValidationMessages().FirstOrDefault();
var fieldIdentifier = context.Field(firstErrorField);
await JSRuntime.InvokeVoidAsync("focusElement", fieldIdentifier);
}
}
我们在OnInvalidSubmit事件中调用HandleInvalidSubmit方法,该方法接受一个EditContext作为参数。我们在该方法中获取第一个非法字段的名称,并使用Field方法获取与该名称匹配的字段标识符。 然后,我们使用JSRuntime对象调用名为focusElement的JavaScript函数。我们传递我们的字段标识符作为参数。
我们需要在JavaScript中定义focusElement函数以接收我们的字段标识符并将其定位。 这是一个示例代码:
function focusElement(field) {
var element = document.querySelector(`#${field.id}`);
element.focus();
}
注意:我们需要在组件上添加Inject