Mostrar mensajes de error de resumen e individuales mediante el complemento de validación de jQuery

Question

¿Cómo puedo mostrar los mensajes de error individuales y el resumen para el complemento jQuery?

De hecho, encontré a similar question, pero solo hace referencia a algunos enlaces que puedo usar, pero no estoy seguro de por dónde empezar.

Recibí la parte que muestra los mensajes de error individuales, pero necesito mostrar el resumen en un cuadro de alerta en el envío, y el complemento se puede encontrar here.

Acabo de descubrir cómo, gracias por el código de David, y en mi pregunta de seguimiento - El cuadro de alerta sería "Nombre: introduzca un nombre válido".

Código

a continuación:

$(document).ready(function() { 
    var submitted = false; 
    ('.selector').validate({ 
     showErrors: function(errorMap, errorList) { 
      if (submitted) { 
       var summary = "You have the following errors: \n"; 
       $.each(errorMap, function(key, value) { 
       summary += key + ': ' + value + "\n"; 
       }); 
       alert(summary); 
       submitted = false; 
      } 
      this.defaultShowErrors(); 
     }, 
     invalidHandler: function(form, validator) { 
      submitted = true; 
     } 
    }); 
}); 

Answer 1

Como la cuestión vinculada dice, la showErrors de devolución de llamada se llama cada vez que se muestran errores. Puede usar esto para crear su resumen y alertarlo. A continuación, puede llamar al this.defaultShowErrors() para mostrar los mensajes de error individuales normales.

Por defecto, showErrors se llama para una gran cantidad de eventos (enviar, teclado, desenfoque, etc.). Puede inhabilitarlos o utilizar el método invalidHandler, que solo se invoca cuando se envía un formulario no válido.

Ejemplo:

$(document).ready(function() { 
    var submitted = false; 
    ('.selector').validate({ 
     showErrors: function(errorMap, errorList) { 
      if (submitted) { 
       var summary = "You have the following errors: \n"; 
       $.each(errorList, function() { summary += " * " + this.message + "\n"; }); 
       alert(summary); 
       submitted = false; 
      } 
      this.defaultShowErrors(); 
     },   
     invalidHandler: function(form, validator) { 
      submitted = true; 
     } 
    }); 
}); 

Ver here para obtener una lista completa de las opciones que se pueden pasar al método validate.