Validación de Jquery: ¿muestra el resumen de validación durante la validación?

Question

¿Es posible obtener la validación de jquery para mostrar el resumen de validación usando una validación ansiosa?

estoy usando MVC 3 (si es importante) y mis formas validar cuando cada elemento pierde el foco:

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

Esto demuestra errores individuales en cada campo, sin embargo, también quiero mostrar los errores en el bloque de resumen de validación Sin embargo, ese resumen de validación solo aparece cuando se envía el formulario, no en foco perdido.

He intentado conectar a showErrors, sin embargo eso solo me da el error de campo actual, no la lista actual de errores.

---

Para completar, aquí está el código del formulario:

@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, creo que me di cuenta de esto.

El problema se debe en realidad al uso de la validación no intrusiva con MVC 3, ya que la inicialización de la validación de jQuery para usted Por lo tanto, la única forma de configurar la validación es utilizando form.data("validator").settings. Sin embargo, tratando de establecer el errorLabelContainer a través de este método, es decir:

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

... no funciona, debido a la validación de jQuery sólo utiliza este valor internamente en que es función init(), para configurar un montón de otros ajustes como contenedores, etc. Traté de emular lo que hace, o incluso llamar al $("#form").data("validator").init() nuevamente después de configurar el errorLabelContainer, pero al hacerlo causó un comportamiento extraño y sufrí una serie de otras configuraciones.

Así que tomé un enfoque diferente.En primer lugar, he proporcionado un lugar para MVC para poner en las cadenas de error individuales usando @Html.ValidationMessageFor(), y añadiendo display:none a mantenerlo oculto:

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

Luego, en el showErrors de devolución de llamada, copio esas cadenas en el sumario de validación después de llamando 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>"); 

    }; 

Esto me dio el comportamiento que quería, mostrar/ocultar los errores de validación como una lista en el resumen como el usuario rellenar los campos en el formulario.

Answer 2

Esto es de la demo page; el invalidHandler y el código para crear un resumen de error. Pero se activa en el envío form que no es lo que solicitó.

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

Sin embargo, el método no requiere errorLabelContainer:form presentación. As per the documentation, "Todas las etiquetas de error se muestran dentro de una lista desordenada con el ID" messageBox ", según lo especificado por el selector pasado como opción errorContainer. Todos los elementos de error se envuelven dentro de un elemento li para crear una lista de mensajes."

errorLabelContainer: "#messageBox", 

Aquí es una demostración que muestra cruda de validación utilizando onfocusout. No hay botón de enviar para probar este punto. El #messageBox acumula todos los mensajes a medida que se recopilan.

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

Answer 3

que estaba teniendo problemas similares y escribí esto, parece como una manera fácil de obtener el comportamiento que busca:

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