'實時'更新驗證摘要

Question

您好我正在使用MVC4進行客戶端驗證。這非常適合在字段旁邊顯示驗證消息。

我添加了一個驗證摘要：

@Html.ValidationSummary(false) 

這工作，客戶端「東經所有。儘管如此，我希望它有不同的表現。目前僅當點擊提交按鈕時，驗證摘要中的消息纔會改變。我希望它們是動態的，以與每個字段的驗證消息類似的方式填充。

有人可以提出一種方法來實現這一目標嗎？

任何觸發摘要更新的信息都會很棒。

Answer 1

我已經設置了驗證摘要中「實時」更新還考慮以下幾點：

1. 更新彙總只一旦它的可見（後頁面驗證/提交）
2. 清除摘要當一切有效

開始提取驗證，overrride showErrors（），並實現我們的邏輯：

var validator = $('form').data('validator'); 
validator.settings.showErrors = function (map, errors) { 
    this.defaultShowErrors(); 
    if ($('div[data-valmsg-summary=true] li:visible').length) { 
     this.checkForm(); 
     if (this.errorList.length) 
      $(this.currentForm).triggerHandler("invalid-form", [this]); 
     else 
      $(this.currentForm).resetSummary(); 
    } 
} 

由於我使用這種解決方案我的整個網站，我創建了下面的init（onready）：

$('form').each(function() { 
    var validator = $(this).data('validator'); 
    if (validator) { 
     validator.settings.showErrors = function (map, errors) { 
      this.defaultShowErrors(); 
      if ($('div[data-valmsg-summary=true] li:visible').length) { 
       this.checkForm(); 
       if (this.errorList.length) 
        $(this.currentForm).triggerHandler("invalid-form", [this]); 
       else 
        $(this.currentForm).resetSummary(); 
      } 
     }; 
    } 
}); 

下面是上面所用的resetSummary：

jQuery.fn.resetSummary = function() { 
    var form = this.is('form') ? this : this.closest('form'); 
    form.find("[data-valmsg-summary=true]") 
     .removeClass("validation-summary-errors") 
     .addClass("validation-summary-valid") 
     .find("ul") 
     .empty(); 
    return this; 
}; 

Answer 2

客戶端摘要似乎是在整個表單被驗證時生成的，您可以通過調用valid（）插件方法自己做到這一點。在jQuery驗證腳本之後添加這個。

<script> 
    $(function() { 
     $(':input').on("keyup click", function() { 
      $('form').valid(); 
     }); 
    }); 
</script> 

我所包含的示例事件是keyup和click，但是您可以添加或從此空間分隔列表中刪除。