Javascript 不显示jQuery的验证摘要不引人注目的验证

我正在与以下人员合作：

• MVC4
• jQuery 1.11.2
• jQuery验证1.13.1
• jQuert.Validate.Unobtrusive（通过nuget显示为3.2.3）
• 淘汰赛3.3

我的淘汰视图模型模板如下所示：

<tbody data-bind="foreach:recipientEmailAddressList">
    <tr>
        <td class="no-padding" style="width:330px">
            <input class="suppress-ms-clear input-parameter full-width" data-bind="value:EmailAddress, hasfocus:EmailAddress.focused" name="EmailAddresses" data-val="true" data-val-email="Please enter a valid email address.">
        </td>
        <td class="no-padding align-right">
            <div class="delete" data-bind="visible: $root.recipientEmailAddressList().length > 1">
                <a href="" data-bind="click:$root.removeRecipientEmailAddress"><span class="no-wrap">X</span></a>
            </div>
        </td>
    </tr>
</tbody>

当我添加一封验证失败的电子邮件时，无效元素样式将正确应用于输入元素，但是验证摘要不会显示验证错误。同样，即使存在明显的验证错误，也允许用户提交页面

我没有任何绑定到表单提交元素的代码

似乎不引人注目的验证知道应用错误样式会出现问题，但是为什么不显示验证摘要呢？为什么我可以提交表格？如果我更正电子邮件地址使其有效，输入上的错误样式将消失。

TLDR:“jQuery验证”和“Microsoft jQuery不引人注目的验证”不能很好地协同工作（）。放弃Microsoft低调的验证脚本，转而使用jQuery Validate对html属性验证的本机支持。它的效果非常好

详细说明：

我最近一直在努力解决这个问题，经过数小时的研究，我得出结论，“jQuery验证”和“Microsofts不引人注目的验证”不能很好地协同工作（）

从这篇文章中，我了解到微软的低调验证通过覆盖一些选项阻碍了很多jQuery验证功能。例如，加载不引人注目的脚本后，将忽略任何自定义设置。这使得在JavaScript中指定自定义验证规则/行为变得非常困难（在我的案例中这是必需的）

对于我的情况，我也在使用。我要做的第一件事是使用（可通过NuGet获得）将其加载到KnockoutJS中

然后，我将数据绑定应用于我的标记，并由KnockoutJS生成HTML。为了让验证对我起作用，我从一个HTML助手函数（如

TextBoxFor

）复制了生成的标记，并将生成的验证规则应用于我的HTML

例如：

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

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

然后我遇到了另一个问题：如果不重写jQuery validate的一些设置，我就无法验证禁用/只读输入（我知道这是非常规的，但我需要它）。正如我前面提到的，如果不修改不引人注目的验证脚本，这是不可能的。（Yuk！）

最后，我偶然发现了这个网站：它也在。就在这时，我发现：

自从jQuery Validate 1.11.x之后，他们开始包括对 不引人注目的验证，可用于动态内容

然后我放弃了微软不引人注目的验证脚本。需要注意的是，Microsoft的非侵入性脚本的验证属性与jQuery验证非侵入性本机脚本使用的验证属性不同。因此，需要project提供自定义HTML帮助程序

一旦我删除了Microsoft不引人注目的验证脚本，并用jQuery Validate使用的正确属性替换了所有生成的属性，我的表单就开始正确验证了！：）

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

还要注意的是，由于删除了Microsoft不引人注目的验证脚本，我需要使用以下代码在表单上手动设置验证：

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

下面是一个将KnockoutJS与jQuery的本机不引人注目的验证一起使用的示例

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

现在，关于验证摘要：我仍然没有让它工作，但据我所知，您需要覆盖显示错误的默认实现。在下面的代码中，我演示了如何使用自定义工具提示来显示错误消息（）。我假设一旦在表单上检测到错误，您必须执行类似的操作，将错误消息应用到ValidationSummary。也就是说，运行错误列表并将它们附加到由

@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!");
    }
});

编辑：对于任何感兴趣的人，这里是我引用的，用于获取只读/禁用的输入以进行验证

---

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

在你的答案中有很多很好的信息和细节。我将探讨你提到的要点，并赞赏你的回答的彻底性。

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

//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!");
    }
});