Convalida Jquery: mostra il riepilogo di convalida durante la convalida di eager?

Question

È possibile ottenere la convalida jquery per mostrare il riepilogo di convalida utilizzando la convalida desiderativa?

sto usando MVC 3 (se è importante) e le mie forme validare quando ogni elemento perde il focus:

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

Questo dimostra errori individuali in ogni campo, ma voglio anche mostrare questi errori nel blocco di riepilogo della convalida. Tuttavia, tale riepilogo di convalida viene visualizzato solo quando il modulo viene inviato, non in caso di perdita di concentrazione.

Ho provato ad agganciare showErrors, tuttavia questo mi dà solo l'errore di campo corrente, non l'attuale elenco di errori.

---

Per completezza, ecco il codice del modulo:

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

Answer 1

Ok, credo di aver capito questo.

Il problema è in realtà dovuto all'utilizzo della convalida non intrusiva con MVC 3, poiché esegue l'inizializzazione della convalida jQuery per te. Pertanto, l'unico modo per configurare la convalida è utilizzando form.data("validator").settings. Tuttavia, cercando di impostare il errorLabelContainer tramite questo metodo, vale a dire:

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

... non funziona, perché la convalida di jQuery utilizza esclusivamente questo valore internamente è funzione init(), per configurare una serie di altre impostazioni come contenitori, ecc. Ho provato a emulare quello che fa, o anche a chiamare $("#form").data("validator").init() ancora una volta dopo aver impostato il errorLabelContainer, ma farlo ha causato un comportamento strano e hosed un sacco di altre impostazioni.

Quindi ho adottato un approccio diverso.In primo luogo, ho fornito un posto per MVC per mettere nelle singole stringhe di errore utilizzando @Html.ValidationMessageFor(), e l'aggiunta di display:none di tenerlo nascosto:

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

Poi, nel showErrors richiamata, copio tali stringhe in al sommario di convalida dopo chiamando 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>"); 

    }; 

Questo mi ha dato il comportamento che volevo, visualizzare/nascondere gli errori di validazione come un elenco nel sommario come l'utente compilati i campi del modulo.

Answer 2

Questo è dal demo page; il invalidHandler e il codice per creare un riepilogo degli errori. Ma è attivato su form invio che non è quello che hai richiesto.

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

Tuttavia, il metodo errorLabelContainer: non richiede form sottomissione. As per the documentation, "Tutte le etichette di errore vengono visualizzate all'interno di un elenco non ordinato con l'ID" messageBox ", come specificato dal selettore passato come opzione errorContainer. Tutti gli elementi di errore sono racchiusi all'interno di un elemento li, per creare un elenco di messaggi."

errorLabelContainer: "#messageBox", 

Ecco una demo grezzo che mostra la convalida utilizzando onfocusout. Non esiste un pulsante di invio per dimostrare questo punto. Lo #messageBox accumula tutti i messaggi man mano che vengono raccolti.

http://jsfiddle.net/sparky672/bAN2Q/

Answer 3

stavo avendo problemi simili e ha scritto questo, sembra un modo facile per ottenere il comportamento che stai cercando:

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