不显示 jQuery 不显眼的验证摘要

TLDR："jQuery Validate"和"Microsoft jQuery Unobtrusive Validation"不能很好地协同工作（参考）。放弃Microsoft不显眼的验证脚本，并使用jQuery Validate对html属性验证的本机支持。它的效果要好得多。

详细描述：

我最近一直在为此苦苦挣扎，经过数小时的研究，我得出的结论是"jQuery Validate"和"Microsoft的不显眼的验证"不能很好地协同工作（参考）。

从这篇文章中，我了解到Microsoft不显眼的验证通过覆盖某些选项来扼杀许多jQuery Validify功能。例如，加载不显眼的脚本后，将忽略任何自定义设置。这使得在 JavaScript 中指定自定义验证规则/行为变得非常困难（在我的情况下是必需的）。

对于我的情况，我也在使用KnockoutJS。我要做的第一件事是将我的 C# 模型序列化为 JSON 模型，然后使用 ko.mappings 实用程序（可通过 NuGet 获得）将其加载到 KnockoutJS 中。

然后，我将数据绑定应用于我的标记，并让 KnockoutJS 生成 HTML。为了使验证对我有用，我从 HTML 帮助程序函数之一（如 TextBoxFor）复制了生成的标记，并将生成的验证规则应用于我的 HTML。

例如：

<data-val-required="This fields is required" .... >

正如您提到的，虽然此解决方案部分工作，但我无法让脚本正确突出显示无效输入并显示验证摘要。

起初，我认为这就是我需要做的，以使不显眼的验证正常工作。但后来我发现，首先，要验证的每个元素都需要一个唯一的名称（duh），其次，不显眼的验证脚本不适用于动态生成的内容。

为了解决不显眼的验证脚本不适用于动态生成内容的问题，我遵循了本文、本文和本文中的建议。

使用下面的代码，我能够让它重新解析数据：

var form = $(".formSelector")
form.removeData('validator');
form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse(form);

在重新解析表单并动态添加任何内容后，我能够正确验证新生成的字段。我也发现这可能有帮助，但我从未最终使用它。

然后我遇到了另一个问题：我无法在不覆盖 jQuery Validate 的某些设置的情况下验证禁用/只读输入（我知道这是非常规的，但我需要它）。正如我之前提到的，如果不修改不显眼的验证脚本，这是不可能的。（哎呀！

最终我偶然发现了这个网站：jQuery Validate Unobtrusive Native，它也在GitHub上。就在这时，我发现：

从jQuery Validate 1.11.x开始，他们开始包括对以下方面的本机支持 不显眼的验证，适用于动态内容

然后，我放弃了Microsoft不显眼的验证脚本。请务必注意，Microsoft 的不显眼脚本的验证属性与 jQuery 验证不显眼的本机脚本使用的验证属性不同。因此，需要此项目提供的自定义 HTML 帮助程序。

一旦我删除了Microsoft不显眼的验证脚本，并将所有生成的属性替换为jQuery Validate使用的正确属性，我的表单就开始正确验证了！ :)

使用它，我确定了如何转换属性，但我相信还有许多其他参考/示例。

另请注意，删除Microsoft不显眼的验证脚本后，我需要使用以下代码手动在表单上设置验证：

$(".formSelector").validate({
...options...
});

下面是一个KnockoutJS与jQuery的Native Unobtrusive Validation一起使用的示例。

您可能需要编写一些 CSS 来处理元素的突出显示，因为 AFAICT、jQuery Validate 使用的错误类与Microsoft不显眼的脚本不同的错误类。

现在，关于验证摘要：我仍然没有让它工作，但据我所知，您需要覆盖默认实现以显示错误。在下面的代码中，我说明了如何使用自定义工具提示来显示错误消息（参考）。我假设您必须执行类似操作才能在表单上检测到错误后将错误消息应用于验证摘要。也就是说，运行错误列表并将其附加到 @Html.ValidationSummary() 生成的验证摘要元素。

我也在尝试实现这一目标，所以一旦我想出如何做到这一点，我就会发布我的解决方案。

//Note this requires the bootstrap tooltip plugin...
$("form").validate({
    showErrors: function (errorMap, errorList) {
        // Clean up any tooltips for valid elements
        $.each(this.validElements(), function (index, element) {
            var $element = $(element);
            $element.data("title", "") // Clear the title - there is no error associated anymore
                .removeClass("error")
                .tooltip("destroy");
        });
        // Create new tooltips for invalid elements
        $.each(errorList, function (index, error) {
            var $element = $(error.element);
            $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
                .data("title", error.message)
                .addClass("error")
                .tooltip(); // Create a new tooltip based on the error messsage we just set in the title
        });
    },
    rules: { /*.... Rules here ....*/ },
    submitHandler: function (form) {
        alert("This is a valid form!");
    }
});

编辑：对于任何感兴趣的人，我引用了SO文章以获取只读/禁用的输入以进行验证。

希望这最终会帮助某人 - 我希望我一开始就找到了这些信息。