ASP.Net Core 客户端验证：是否存在“验证成功”DOM 事件？答案

【问题标题】：ASP.Net Core client-side validation: is there a "validation succeeded" DOM event?ASP.Net Core 客户端验证：是否存在“验证成功”DOM 事件？
【发布时间】：2021-04-11 15:15:35
【问题描述】：

我有一个使用 Bootstrap 并进行客户端验证的 ASP.Net Core Razor 页面。

表格如下所示：

<form method="post" class="needs-validation" novalidate>
...

_ValidationScriptsPartial.cshtml 如下所示：

<environment include="Development">
    <script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
    ...

一切正常。如果用户未能输入必填字段或输入的数字超过最大值，则表单将不会提交，并且违规字段会以红色突出显示。

问：“验证成功”是否触发了 DOM 事件？

我想在我知道表单“OK”之后执行一些 Javascript，但在它实际发布到服务器之前。

提前谢谢你！

【问题讨论】：

stackoverflow.com/questions/28683504/…

标签： c# asp.net-core bootstrap-4 asp.net-core-mvc unobtrusive-validation

【解决方案1】：

如果您想要快速的统包解决方案，您只需添加jQuery Validation Plugin。 valid 条件仅在其有效时才返回 true。

回答：然后您可以通过发送data structure 或control 将rxJs-subscribe 发送给它，以使用此jquery.observable 插件获取事件

以下是 Jquery Valid 的工作原理：

表格：

$("form").valid(); 
// or
if($("form").valid()) {
 //VALID continue
}

控制：

$("[name='CountyOfBirth']").valid(); // RETURNS true/false

在提交时：也可以通过检查表单提交来获得类似的有效事件结果

$("form").submit(function() {
    if($(this).valid()) {
       //VALID
    } else {
       //ERROR
    }
});

【讨论】：

【解决方案2】：

您可以将 jQuery Unobtrusive Ajax 与剃刀视图中的表单一起使用。

首先，您需要包含 jQuery Unobtrusive Ajax 脚本：

npm i jquery-ajax-unobtrusive -D  (or --save-dev)

其次，您需要通过添加特定的自定义 data- 属性在表单上启用不显眼的 ajax：

<form method="post" class="needs-validation" novalidate
  data-ajax="true" data-ajax-method="post"
  data-ajax-begin="onFormBegin"
  data-ajax-complete="onFormComplete">

有other attributes可以使用。

这里可以注册回调，例如在表单提交的开始和完成时：

@section scripts {
    <script type="text/javascript">
        $(function() {
            window.onFormBegin = function() {
                // This is the place where you can execute some Javascript 
                // after you know the form is "OK", but before it's actually 
                // POSTED to the server.
            };

            window.onFormComplete = function(request, status) {
                // ...
            };
        });
    </script>
}

【讨论】：