jQuery验证 - 渴望在验证过程中显示验证总结？ [英] Jquery validation - show validation summary during eager validation?

问题描述

时有可能得到jQuery验证使用验证急于展现验证摘要？

我使用MVC 3（如果它的事项），当每一个元素失去焦点我的形式验证：

  $（'＃MyForm的'）验证（{onfocusout在：功能（元素）{$（元素）.valid（）;}};
 

这显示了每场个人失误，但是我也想显示验证摘要块这些错误。然而，验证摘要只显示了当表单提交，而不是在失去重心。

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

---

有关完整性，这里的形式为code：

  @using（Ajax.BeginForm（...））
{  ＆LT; D​​IV CLASS =字段面板＆GT;
    @ Html.EditorFor（M = GT; m.PatientID）
    ...  ＆LT; / DIV＆GT;
  ＆LT;输入类型=提交级=carecon按钮，下一个值=下一步/＆GT;
  @ Html.ValidationSummary（空，新的{@class =验证-摘要}）
}
 

解决方案

好吧，我想我想通了这一点。

问题实际上是由于使用不显眼的审定与MVC 3，因为它的jQuery验证初始化你这样配置验证的唯一方法是使用 form.data（验证） .settings 。然而，尝试通过这种方法，即设置 errorLabelContainer ：

  $（＃表）的数据（验证）settings.errorLabelContainer =#messageBox。
 

...不起作用，因为在它的init（）函数jQuery的验证只使用该值内部，配置一些其他设置，如集装箱，等我试图模仿它做什么，甚至调用 $（＃表）。数据（验证）。的init（）重新设置 errorLabelContainer ，但这样做后，所以导致怪异的行为，并用水管冲洗一堆其他设置。

所以我采取了不同的方法。首先，我提供了一个MVC的地方来存放在单独的错误字符串中使用 @ Html.ValidationMessageFor（），并添加显示：无将它隐藏起来：

  @using（Ajax.BeginForm（...））
{  ＆LT; D​​IV CLASS =字段面板＆GT;
    @ Html.EditorFor（M = GT; m.PatientID）
    @ Html.ValidationMessageFor（M = GT; m.PatientID，空，新的{风格=显示：无}）
    ...  ＆LT; / DIV＆GT;
  ＆LT;输入类型=提交级=carecon按钮，下一个值=下一步/＆GT;
  ＆LT; UL ID =错误摘要＆GT;
  ＆LT; / UL＆GT;
}
 

然后，在 showErrors 回调，我在复制这些字符串验证摘要在调用 defaultShowErrors（） ：

  $（＃表）的数据（验证）settings.onfocusout =功能（元素）{$（元素）.valid（）。 };
    $（＃表）。数据（验证）。settings.showErrors =功能（errorMap，errorList）{
        this.defaultShowErrors（）;
        $（＃错误摘要），空（）。
        $（现场验证错误跨越，$（＃表））
            。克隆（）
            .appendTo（＃错误摘要）
            .wrap（＆LT;立GT;）;    };
 

这给了我想要的行为，显示/隐藏验证错误中总结为填写表单上的域用户列表。

Is it possible to get jquery validation to show the validation summary using eager validation?

I'm using MVC 3 (if it matters) and my forms validate when each element loses focus:

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

This shows individual errors on each field, however I also want to show those errors in the validation summary block. However, that validation summary only shows up when the form is submitted, not on lost focus.

I've tried hooking into showErrors, however that only gives me the current field error, not the current list of errors.

---

For completeness, here's the form code:

@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" })
}

解决方案

Ok, I think I figured this out.

The issue is actually due to using the unobtrusive validation with MVC 3, since it does the jQuery validation initialization for you Thus the only way to configure validation is by using form.data("validator").settings. However, trying to set the errorLabelContainer via this method, i.e.:

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

... doesn't work, because jQuery's validation only uses this value internally in it's init() function, to configure a bunch of other settings like containers , etc. I tried emulating what it does, or even calling $("#form").data("validator").init() again after setting the errorLabelContainer, but doing so caused weird behavior and hosed a bunch of other settings.

So I took a different approach. First, I provided a place for MVC to put in the individual error strings using @Html.ValidationMessageFor(), and adding display:none to keep it hidden:

@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>
}

Then, in the showErrors callback, I copy those strings in to the validation summary after calling 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>");

    };

This gave me the behavior I wanted, showing/hiding the validation errors as a list in the summary as the user filled out the fields on the form.

这篇关于jQuery验证 - 渴望在验证过程中显示验证总结？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！