AJAX 表单上的流利验证答案

【问题标题】：Fluent Validation on AJAX FormAJAX 表单上的流利验证
【发布时间】：2022-05-04 00:38:31
【问题描述】：

我正在 ASP.net MVC 中创建一个操作/视图，我想使用 AJAX/jQuery 发布该操作/视图。我正在使用 Fluent Validation 在我的视图模型中进行验证。

我这样做时是否可以进行客户端验证？为了使用流式验证触发此客户端验证，脚本会是什么样子？

我是创建一个常规表单并使用 jquery 创建一个提交事件并调用某些东西，还是只使用 Ajax.BeginForm() 来代替？

【问题讨论】：

请参阅SO stackoverflow.com/questions/4713985/…上的这篇文章
@patel.milanb 这篇文章不是在谈论使用 jQuery 的 AJAX 表单。我的客户端验证在未通过 AJAX 提交的常规页面上运行良好。我想知道我是否需要做任何特别的事情来将其连接起来以提交 jQuery AJAX 表单……或者是否有可能这样做。
通过 ajax 提交表单并使用 jquery 验证表单？这就是你要找的吗？
我认为问题很明确。我想知道在通过 AJAX 和 jQuery 提交表单时如何让 Fluent Validation 正常工作。我正在使用 Fluent Validation 库。它在常规形式的帖子中运行良好。如何使用 AJAX 表单使其工作。

标签： c# asp.net-mvc jquery fluentvalidation

【解决方案1】：

我使用带有数据注释的 jQuery 非侵入式验证，但看起来你需要和我一样的设置（下面的前两个选项）加上另一个步骤：

在您的视图或 web.config 中启用客户端验证
在您的视图或 web.config 中启用不显眼的验证
将 FluentValidationModelValidatorProvider 添加到 ModelValidatorProviders 集合中

对于前两个，请参阅Enabling Client-Side Validation。最后一个见Fluent Validation: Integration with ASP.NET MVC。

如果您想通过 AJAX 提交表单，您可以使用 $('#form_selector').valid() 触发整个表单的验证，或使用 $('#input_selector').valid() 触发单个输入的验证。如果验证成功，则对 valid() 的调用返回 true（否则返回 false）。

【讨论】：

那么在您看来，通过 ajax 提交表单的脚本会是什么样子？您需要调用什么来触发验证吗？
啊！是的，您可以调用 $('#form_selector').valid() 来验证整个表单，或者调用 $('#field_selector').valid() 来验证特定输入。 valid() 调用将返回真或假。更新的答案包括这个——我也误解了。

【解决方案2】：

Fluent Validation 是一个服务器端验证库。因此，Fluent Validation 支持一些基本的客户端验证（如 required、maxlength 等）。您不能在客户端使用所有服务器端规则。

如果您想为 Fluent Validation 添加完整的客户端支持，您需要在您的项目中再添加一个库。 Form Helper 可以解决您的问题。

https://github.com/sinanbozkus/FormHelper

您需要像这样创建表单：

var formConfig = new FormConfig(ViewContext)
{
    FormId = "ProductForm",
    FormTitle = "New Product",
    BeforeSubmit = "ProductFormBeforeSubmit", // optional
    Callback = "ProductFormCallback" // optional,
};

// <form id="@formConfig.FormId" asp-controller="Home" asp-action="Save"
// ...

@await Html.RenderFormScript(formConfig)

之后，您需要将 [FormValidator] 属性添加到您的操作中。

[HttpPost, FormValidator]
public IActionResult Save(FormViewModel viewModel)

现在所有 Fluent 验证规则都可以在客户端运行。

【讨论】：