Question

是否可以使用急切验证来获取jquery验证以显示验证摘要？

我正在使用MVC 3（如果它很重要）并且我的表单会验证每个元素何时失去焦点：

$('#myform').validate({ onfocusout: function(element) { $(element).valid(); } };

这显示了每个字段的个别错误，但我还想在验证摘要块中显示这些错误。但是，该验证摘要仅在提交表单时显示，而不是在丢失焦点时显示。

我试过挂钩showErrors，但是这只会给我当前的字段错误，而不是当前的错误列表。

为完整起见，这是表格代码：

@using (Ajax.BeginForm(...))
{

  <div class="field-panel">
    @Html.EditorFor(m => m.PatientID)
    ...

  </div>
  <input type="submit" class="carecon-button-next" value="Next" />
  @Html.ValidationSummary(null, new { @class = "validation-summary" })
}

Answer 1

好的，我想我想出来了。

问题实际上是由于使用MVC 3的不显眼验证，因为它为您执行jQuery验证初始化因此，配置验证的唯一方法是使用form.data("validator").settings。但是，尝试通过此方法设置errorLabelContainer，即：

$("#form").data("validator").settings.errorLabelContainer = "#messageBox";

...不起作用，因为jQuery的验证仅在其init（）函数内部使用此值，以配置一堆其他设置，如容器等。我尝试模拟它的功能，甚至调用{{ 1}}在设置$("#form").data("validator").init()之后再次，但这样做会导致奇怪的行为，并且会进行一些其他设置。

所以我采取了不同的方法。首先，我为MVC提供了一个位置，使用errorLabelContainer输入单个错误字符串，并添加@Html.ValidationMessageFor()以隐藏它：

display:none

然后，在@using (Ajax.BeginForm(...)) { <div class="field-panel"> @Html.EditorFor(m => m.PatientID) @Html.ValidationMessageFor(m => m.PatientID, null, new { style = "display:none"}) ... </div> <input type="submit" class="carecon-button-next" value="Next" /> <ul id="error-summary"> </ul> }回调中，我将这些字符串复制到强调showErrors后的验证摘要中：

defaultShowErrors()

这给了我想要的行为，当用户填写表单上的字段时，将摘要中的验证错误显示/隐藏为列表。

Answer 2

我遇到了类似的麻烦并写了这个，这似乎是一种简单的方法来获得你正在寻找的行为：

function EnableEagerValidation(){
    var itemsNeedingValidation = $('*[data-val="true"]');
    itemsNeedingValidation.each(function () {
        $(this).blur(function(){$(this).closest("form").valid();});
    });
}

Answer 3

这来自demo page; invalidHandler和创建错误摘要的代码。但它是在form提交时触发的，这不是您所要求的。

invalidHandler: function(e, validator) {
    var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                 ? 'You missed 1 field. It has been highlighted below'
                 : 'You missed ' + errors + ' fields.  They have been highlighted below';
                 $("div.error span").html(message);
                 $("div.error").show();
        } else {
            $("div.error").hide();
        }
},

但是，errorLabelContainer:方法不需要form提交。 As per the documentation，“所有错误标签都显示在ID为”messageBox“的无序列表中，由作为errorContainer选项传递的选择器指定。所有错误元素都包含在li元素内，以创建列表消息。“

errorLabelContainer: "#messageBox",

以下是使用onfocusout显示验证的粗略演示。没有提交按钮来证明这一点。 #messageBox会在收集邮件时累积这些邮件。

http://jsfiddle.net/sparky672/bAN2Q/

Jquery验证 - 在急切验证期间显示验证摘要？

3 个答案: