即使提交失败，ASP.NET Core Unobtrusive客户端验证表单onsubmit也会触发 [英] ASP.NET Core Unobtrusive Client Side Validation Form onsubmit fires even on validation failure

问题描述

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

Note: This is related to .NET Core v2.0. You may find related posts but they don't address the issue I'm facing.

我正在应用不打扰的客户端验证，其代码如下:

I'm applying Unobtrusive Client side validation with code as below:

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

好事是它正在客户端进行验证.

Good thing is it's performing validation on client side.

但是，即使验证失败，也会触发form.onsubmit事件.结果，我的showPleaseWait方法被调用.我认为不应该调用它，因为由于验证失败而尚未提交表单.

However, form.onsubmit event is fired even when the validation fails. As a result my showPleaseWait method is called. I believe it shouldn't be called since the form is not submitted yet due to validation failure.

下面是模型:

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

任何解决方案或解决方法都将受到高度赞赏.

Any solution or workaround would be highly appreciated.

推荐答案

jQuery非侵入式验证和更高级别的jQuery Validation插件不会阻止提交事件，正如您已经指出的，这意味着您的尝试提交表单时，都会调用>函数.

The jQuery Unobtrusive Validation and higher-level jQuery Validation plugins do not block the submit event from being raised, which, as you've noted, means your showPleaseWait() function will be called whenever the user attempts to submit the form.

进行此工作的一种方法是在尝试运行自己的代码之前，从您的showPleaseWait函数内部查询验证状态.这是一个示例:

One option for making this work is to query the status of validation from within your showPleaseWait function, before attempting to run your own code. Here's an example:

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

此实现利用jQuery Validation的 valid 函数的优势，

This implementation takes advantage of jQuery Validation's valid function, which:

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

Checks whether the selected form is valid or whether all selected elements are valid.

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

I've just used a simple $("form") selector above, but this may need to be more specific if you have multiple forms on a single page, etc.

这篇关于即使提交失败，ASP.NET Core Unobtrusive客户端验证表单onsubmit也会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！