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.但是,尝试设置errorLabelContainervia这个方法,即:

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

...不起作用,因为jQuery的验证仅在其init()函数内部使用此值,以配置一堆其他设置,如容器等.我尝试模拟它的功能,甚至$("#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>");

    };

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