jQuery validar plugin - showErrors opción - errorContainer no des-ocultar/mostrar

Question

He estado tratando de obtener una buena solución de validación para mi sitio, pero estoy teniendo problemas con las diferentes opciones. He leído los documentos detenidamente y he analizado ejemplos, pero sigo teniendo problemas.

Mi formulario está en una tabla. Quiero que cada fila tenga su propia fila de error debajo, que normalmente estaría oculta, pero que se mostraría para cada fila según corresponda.

Las siguientes opciones se escondieron y mostraron las filas de error finas, pero el mensaje de error que aparece en cada fila de error fue de toda la concatenación de cada mensaje de error:

$('#myform').validate({ 
    rules: { 
     firstName: "required", 
     lastName: "required" 
    }, 
    messages: { 
     firstName: "Enter your first name.", 
     lastName: "Enter your last name." 
    }, 
    errorContainer: '.errorRow', 
    errorLabelContainer: '.errorRow.appValueColumn', 
    errorPlacement: function(error, element) { 
     error.appendTo(element.parent().next()); 
    } 
}); 

así que traté de usar la opción showErrors de la siguiente :

$('#myform').validate({ 
     rules: { 
      firstName: "required", 
      lastName: "required" 
     }, 
     messages: { 
      firstName: "Enter your first name.", 
      lastName: "Enter your last name." 
     }, 
     errorContainer: '.errorRow', 
     errorContainer: '.errorRow.appValueColumn', 
     showErrors: function(errorMap, errorList) { 
     $.each(errorMap, function(key, value) { 
     $('#'+key).parent().next().children('.appValueColumn').html(errorMap[key]); 
}); 

Bueno, ahora los errores están separados y se muestran en el lugar correcto, pero no puedo conseguir el .errorRows para mostrar. ¿Qué estoy haciendo mal aquí?

Muchas gracias

Answer 1

Si nos fijamos en la fuente del plugin de validación para el método showErrors, que tienen:

this.settings.showErrors 
      ? this.settings.showErrors.call(this, this.errorMap, this.errorList) 
      : this.defaultShowErrors(); 

Esto significa que si usted proporciona un controlador personalizado para este método, el valor predeterminado comportamiento no se ejecuta.

Usted podría this.defaultShowErrors llamada() al final de su controlador propios showErrors, que se convertirán:

showErrors: function(errorMap, errorList) { 
    $.each(errorMap, function(key, value) { 
     $('#'+key).parent().next().children('.appValueColumn') 
        .html(errorMap[key]); 
    }); 
    this.defaultShowErrors(); 
}); 

Espero que esto ayude!

Answer 2

asegurarse de que utiliza el nombre de clase sin el punto inicial en estas líneas:

errorContainer: 'errorRow', 
errorLabelContainer: 'errorRow appValueColumn',