Question

我正在使用以下内容：

MVC4
jQuery 1.11.2
jQuery Validate 1.13.1
jQuert.Validate.Unobtrusive（通过nuget显示为3.2.3）
Knockout 3.3

我的Knockout View Model模板如下所示：

<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视图中也有以下内容：

@Html.ValidationSummary(false)

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

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

似乎不引人注意的验证通过应用错误样式知道存在问题，但为什么它没有显示验证摘要？为什么我可以提交表格？如果我更正了电子邮件地址以使其有效，则输入上的错误样式将消失。

Answer 1

TLDR：＆＃34; jQuery验证＆＃34;和＃34; Microsoft jQuery Unobtrusive Validation＆＃34;不能很好地协同工作（Reference）。删除Microsoft不显眼的验证脚本，并获取jQuery Validate对html属性验证的本机支持。它更好地工作很多。

详细说明：

我最近一直在努力解决这个问题，经过几个小时的研究后，我得出结论：＆＃34; jQuery Validate＆＃34;和＆＃34;微软的不引人注目的验证＆＃34;不能很好地协同工作（Reference）。

从这篇文章中我收集到，微软不引人注目的验证通过覆盖一些选项来扼杀了许多jQuery Validate功能。例如，加载不显眼的脚本后，将忽略任何自定义设置。这使得在JavaScript中指定自定义验证规则/行为非常困难（在我的情况下需要）。

对于我的情况，我也在使用KnockoutJS。我做的第一件事是serialize my C# model into a JSON model，然后使用ko.mappings utility（通过NuGet提供）将其加载到KnockoutJS中。

然后我将数据绑定应用于我的标记，并使用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的设置。正如我之前提到的，如果不修改不显眼的验证脚本，这是不可能的。（育！）

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

自从jQuery Validate 1.11.x以来，他们开始包含对本机的支持不引人注目的验证，适用于动态内容

然后我放弃了微软不显眼的验证脚本。值得注意的是，Microsoft的不显眼脚本的验证属性与jQuery Validate Unobtrusive Native脚本使用的不同。因此需要this项目提供的自定义HTML帮助程序。

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

使用this我建立了如何转换属性，但我确信还有很多其他参考/示例。

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

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

以下是与{jQuery的本地不显眼验证一起使用的KnockoutJS的example。

您可能需要编写一些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获取了只读/禁用的输入以进行验证。

希望这最终会帮助某人 - 我希望我在开始时找到了这个信息。

不显示jQuery Unobtrusive Validation的验证摘要

1 个答案: