ASP.NET 核心不显眼的客户端验证表单 onsubmit 即使在验证失败时也会触发
ASP.NET Core Unobtrusive Client Side Validation Form onsubmit fires even on validation failure
注意:这与.NET Core v2.0 相关。您可能会找到相关帖子,但它们没有解决我面临的问题。
我正在使用以下代码应用 Unobtrusive Client side 验证:
<form asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" onsubmit="showPleaseWait()" >
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Username" class="control-label"></label>
<input asp-for="Username" class="form-control" placeholder="Username" />
<span asp-validation-for="Username" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" value="" class="form-control" placeholder="Password" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg" style="margin:auto;display:block">Log in</button>
</div>
</form>
好消息是它在客户端执行验证。
但是,即使验证失败,也会触发 form.onsubmit
事件。结果调用了我的 showPleaseWait
方法。我认为不应该调用它,因为由于验证失败,表单尚未提交。
型号如下:
public class LoginViewModel
{
[Required]
public string Username { get; set; }
[Required]
[DataType(DataType.Password)]
public string Password { get; set; }
[Display(Name = "Remember me?")]
public bool RememberMe { get; set; }
}
任何解决方案或解决方法将不胜感激。
jQuery Unobtrusive Validation 和更高级别的 jQuery Validation 插件不会阻止引发提交事件,正如您所指出的,这意味着您的 showPleaseWait()
函数将在用户 尝试 提交表单时调用。
实现此功能的一个方法是在尝试 运行 您自己的代码之前,从您的 showPleaseWait
函数中查询验证状态。这是一个例子:
function showPleaseWait() {
if ($("form").valid()) {
// Your code here.
}
}
此实现利用了 jQuery 验证的 valid
函数,其中:
Checks whether the selected form is valid or whether all selected elements are valid.
我只是在上面使用了一个简单的 $("form")
选择器,但是如果您在一个页面上有多个表单等,这可能需要更具体一些。
注意:这与.NET Core v2.0 相关。您可能会找到相关帖子,但它们没有解决我面临的问题。
我正在使用以下代码应用 Unobtrusive Client side 验证:
<form asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" onsubmit="showPleaseWait()" >
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Username" class="control-label"></label>
<input asp-for="Username" class="form-control" placeholder="Username" />
<span asp-validation-for="Username" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" value="" class="form-control" placeholder="Password" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg" style="margin:auto;display:block">Log in</button>
</div>
</form>
好消息是它在客户端执行验证。
但是,即使验证失败,也会触发 form.onsubmit
事件。结果调用了我的 showPleaseWait
方法。我认为不应该调用它,因为由于验证失败,表单尚未提交。
型号如下:
public class LoginViewModel
{
[Required]
public string Username { get; set; }
[Required]
[DataType(DataType.Password)]
public string Password { get; set; }
[Display(Name = "Remember me?")]
public bool RememberMe { get; set; }
}
任何解决方案或解决方法将不胜感激。
jQuery Unobtrusive Validation 和更高级别的 jQuery Validation 插件不会阻止引发提交事件,正如您所指出的,这意味着您的 showPleaseWait()
函数将在用户 尝试 提交表单时调用。
实现此功能的一个方法是在尝试 运行 您自己的代码之前,从您的 showPleaseWait
函数中查询验证状态。这是一个例子:
function showPleaseWait() {
if ($("form").valid()) {
// Your code here.
}
}
此实现利用了 jQuery 验证的 valid
函数,其中:
Checks whether the selected form is valid or whether all selected elements are valid.
我只是在上面使用了一个简单的 $("form")
选择器,但是如果您在一个页面上有多个表单等,这可能需要更具体一些。