javascript - jQuery Unobtrusive验证的验证摘要未显示

Question

我正在与以下人员合作:

MVC4

jQuery 1.11.2

jQuery验证1.13.1

jQuert.Validate.Unobtrusive(通过nuget显示为3.2.3)

knockout 3.3

我的 knockout View 模型模板如下所示:

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

我在MVC View 中也有以下内容:

@Html.ValidationSummary(false)

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

我没有绑定(bind)到表单的Submit元素的任何代码。

看起来不打扰的验证似乎知道通过应用错误样式存在问题，但是为什么不显示验证摘要呢？为什么我可以提交表格？如果我更正了电子邮件地址以使其有效，则输入中的错误样式将消失。

Answer 1

TLDR:“jQuery验证”和“Microsoft jQuery非侵入式验证”不能很好地协同工作(Reference)。删除Microsoft不干扰的验证脚本，然后使用jQuery Validate对html属性验证的本机支持。 的效果更好，更好。

详细描述:

我最近一直在为此苦苦挣扎，经过数小时的研究，我得出的结论是“jQuery Validate”和“Microsofts Unobtrusive Validation”不能很好地协同工作(Reference)。

从本文中，我得出结论，Microsoft的兼容验证通过重写某些选项而扼杀了许多jQuery Validate功能。例如，一旦加载了不干扰脚本，任何自定义设置都将被忽略。这使得很难在JavaScript中指定自定义验证规则/行为(在我的情况下是必需的)。

对于我的情况，我也使用KnockoutJS。我要做的第一件事是serialize my C# model into a JSON model，然后使用ko.mappings utility(可通过NuGet获得)将其加载到KnockoutJS中。

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

例如:

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

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

起初，我认为这是使不干扰验证工作所需要做的全部工作。但是我随后发现，首先，要验证的每个元素都需要一个唯一的名称(duh)，其次，不打扰的验证脚本不适用于动态生成的内容。

为了解决不引人注目的验证脚本不适用于动态生成的内容的问题，我遵循了 this， this和 this文章中的建议。

使用下面的代码，我能够获取它来重新解析数据:

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

重新解析表单后，动态添加任何内容后，我能够获取新生成的字段以进行正确验证。我还发现 this可能会有所帮助，但我从未最终使用过它。

然后，我遇到了另一个问题:在不覆盖jQuery Validate的某些设置的情况下，我无法验证禁用/只读输入(我知道这是非常规的，但我需要它)。如前所述，如果不修改不引人注目的验证脚本，这是不可能的。 (Y!)

最终，我偶然发现了这个站点: jQuery Validate Unobtrusive Native，它也在 GitHub上。正是在这一点上，我发现:

Since jQuery Validate 1.11.x they started including native support for unobtrusive validation which works with Dynamic content

然后，我删除了Microsoft的简单脚本。重要的是要注意，Microsoft的非干扰性脚本的验证属性与jQuery Validate Unobtrusive Native脚本所使用的验证属性不同。因此，需要由 this项目提供的自定义HTML帮助器。

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

使用 this，我建立了如何转换属性的方法，但是我确信还有许多其他引用/示例。

另请注意，删除了Microsoft的非侵入式验证脚本后，需要使用以下代码在表单上手动设置验证:

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

这是KnockoutJS的 example与jQuery的本机非侵入式验证一起使用。

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

现在，关于验证摘要:我仍然没有进行这项工作，但是据我所知，您将需要覆盖默认实现以显示错误。在下面的代码中，我演示了如何使用自定义工具提示来显示错误消息( Reference)。我假设一旦在表单上检测到错误，您将必须执行类似的操作才能将错误消息应用于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!");
    }
});

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

希望这最终将对某人有所帮助-我希望我一开始就找到了此信息。