不显示jQuery Unobtrusive Validation的验证摘要

时间:2015-03-14 17:07:38

标签: javascript jquery asp.net-mvc-4 knockout.js unobtrusive-validation

我正在使用以下内容:

  • 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元素,但验证摘要不会显示验证错误。同样,即使显然存在验证错误,也允许用户提交页面。

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

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

1 个答案:

答案 0 :(得分:7)

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),其次,不显眼的验证脚本不适用于动态生成的内容。

为了解决不使用动态生成内容的不显眼的验证脚本问题,我遵循了thisthisthis文章中的建议。

使用下面的代码,我可以让它重新分析数据:

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获取了只读/禁用的输入以进行验证。

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