Riepilogo convalida aggiornamenti in "tempo reale"

Question

Ciao Sto utilizzando MVC4 con convalida lato client. Questo funziona perfettamente per mostrare i messaggi di convalida accanto ai campi.

Ho aggiunto un riepilogo di convalida:

@Html.ValidationSummary(false) 

Questo funziona, lato client 'n tutti. Mi piacerebbe che si comportasse diversamente però; attualmente i messaggi nel riepilogo di convalida cambiano solo quando si fa clic sul pulsante di invio. Mi piacerebbe che fossero dinamicamente, popolati in modo simile al messaggio di convalida di ogni campo.

Qualcuno può suggerire un modo per raggiungere questo obiettivo?

Qualsiasi informazione su ciò che fa scattare l'aggiornamento di riepilogo sarebbe ottima.

Answer 1

Ho installato il riepilogo di convalida per aggiornare in 'tempo reale' anche in considerazione quanto segue:

1. aggiornare la sintesi sola una volta che è visibile (dopo pagina validate/submit)
2. Chiaro il riepilogo quando tutto è valida

Diamo estrarre il validatore, showErrors overrride() e mettere in atto la nostra logica:

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(); 
    } 
} 

Dal momento che sto usando questa soluzione per tutto il mio sito ho creato il seguente 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(); 
      } 
     }; 
    } 
}); 

Ed ecco la resetSummary usato sopra:

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

Il riepilogo lato client sembra essere generato quando l'intero modulo è convalidato, e puoi farlo tu stesso chiamando il metodo plugin valido(). Aggiungi questo dopo gli script di convalida jquery.

Gli eventi di esempio che ho incluso sono keyup e clic, ma è possibile aggiungere o rimuovere da questo elenco separato da spazio.