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

是否有可能让jquery验证使用预先验证来显示验证摘要？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" }) 
}

来源

2011-10-28 lambinator

你意味着你已经有了一个“验证摘要” ......怎么样你生成的？它没有显示在你的代码中的任何地方。 – Sparky

添加了页面代码的其余部分.. – lambinator

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

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

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

...不行的，因为jQuery的验证只使用该值在内部它的init（）函数，配置了一堆的其他设置像容器等。我尝试模拟它的功能，或者在设置errorLabelContainer后再次调用$("#form").data("validator").init()，但这样做会造成奇怪的行为并导致一堆其他设置。

所以我采取了不同的方法。首先，我提供了一个地方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>"); 

    };

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

来源

2011-10-30 21:28:42 lambinator

这是从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/

来源

2011-10-28 23:06:43 Sparky

我尝试将'errorLabelContainer'设置为我的摘要div，但无济于事 - 它仍然只显示容器中的提交错误。 – lambinator

@Qwerty：看到我添加到我的答案的演示。它甚至没有提交按钮。 – Sparky

谢谢你的演示！它极大地帮助我们找出MVC 3的真正问题。 – lambinator

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

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

来源

2013-02-13 00:25:39 bonneyab

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

回答

相关问题