表单无效后OnValidSubmit需要点击两次按钮

Question

考虑以下代码片段:

@page "/"
@using System.ComponentModel.DataAnnotations
<EditForm Model="@person" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<ValidationSummary />
<InputText id="name" @bind-Value="person.Name" />
<button type="submit">Submit</button>
</EditForm>
<p>@message</p>
@code {
readonly Person person = new();
string message;
void HandleValidSubmit()
{
message = "Name = " + person.Name;
}
private class Person
{
[Required(ErrorMessage = "Name is required")]
public string Name { get; set; }
}
}

复制问题的步骤:

1. 运行应用程序
2. 不要在名称文本输入
中输入任何内容
3. 单击Submit
4. 注意"Name is required"出现验证消息
5. 输入名称"在名称文本中输入
6. 单击Submit
7. 观察验证消息消失
8. 点击再次提交
9. 观察"Name = Joe"消息出现。

在第二次单击Submit按钮(步骤6)之后，OnValidSubmit事件似乎没有触发，即使表单现在是有效的。我必须再次单击它(步骤8)。为什么会这样，我如何才能让OnValidSubmit在步骤6中开火?

Answer 1

你有一个css问题，当你在释放按钮之前按下按钮，按钮改变了位置，所以你根本没有点击按钮。

像这样修改代码

<EditForm Model="person" OnValidSubmit="@HandleValidSubmit">
<DataAnnotationsValidator />
<InputText id="name" @bind-Value="person.Name" />
<button type="submit">Submit</button>
<ValidationSummary />
</EditForm>

Answer 2

当您使用鼠标将焦点从输入控件转移到按钮时，会发生两个重叠的事件。

1. 你已经离开了InputText，所以有一个onChange事件被触发。
2. 你已经点击了按钮，所以有一个onClick事件被引发。

当第一个事件发生时，验证改变，按钮的位置改变。点击空格，所以没有OnClick事件发生。