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

Question

是否可以使用 jquery 验证来显示验证摘要？

我正在使用 MVC 3(如果重要的话)，并且当每个元素失去焦点时我的表单会进行验证:

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

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

我尝试 Hook 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() 函数内部使用此值，以配置一堆其他设置，如Containers等。我尝试模拟它的作用，甚至再次调用 $("#form").data("validator").init()设置 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>");

    };

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