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驗證 - 在急切驗證期間顯示驗證摘要？

回答

相關問題