时间戳

首页 > 解决方案 > ASP.NET Core Unobtrusive Client Side Validation Form onsubmit 即使在验证失败时也会触发

c# - ASP.NET Core Unobtrusive Client Side Validation Form onsubmit 即使在验证失败时也会触发

问题描述

注意：这与 .NET Core v2.0 有关。您可能会找到相关的帖子，但它们并没有解决我面临的问题。

我正在使用以下代码应用不显眼的客户端验证：

<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; }
}

任何解决方案或解决方法将不胜感激。

标签： c#jqueryasp.netasp.net-coreunobtrusive-validation

解决方案

jQuery Unobtrusive Validation 和更高级别的 jQuery Validation 插件不会阻止提交事件的引发，正如您所指出的，这意味着每当用户尝试提交表单showPleaseWait()时都会调用您的函数。

showPleaseWait完成这项工作的一种选择是在尝试运行您自己的代码之前从您的函数中查询验证状态。这是一个例子：

function showPleaseWait() {
    if ($("form").valid()) {
        // Your code here.
    }
}

这个实现利用了 jQuery Validation 的valid功能，它：

检查所选表单是否有效或所有所选元素是否有效。

我刚刚在$("form")上面使用了一个简单的选择器，但是如果您在一个页面上有多个表单等，这可能需要更具体。

推荐阅读