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

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() 函数内部使用此值，以配置一堆其他设置，如容器等。我尝试模拟它的作用，甚至调用 @987654324在设置errorLabelContainer 后再次@，但这样做会导致奇怪的行为并冲洗一堆其他设置。

所以我采取了不同的方法。首先，我为 MVC 提供了一个使用 @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()：

    $("#form").data("validator").settings.onfocusout = function (element) { $(element).valid(); };
    $("#form").data("validator").settings.showErrors = function (errorMap, errorList) {
        this.defaultShowErrors();
        $("#error-summary").empty();
        $(".field-validation-error span", $("#form"))
            .clone()
            .appendTo("#error-summary")
            .wrap("<li>");

    };

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

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/