Complemento de validación de jQuery: no hay mensajes de error en lugar de fondos personalizados

Question

Estoy usando el complemento de validación de jQuery (http://docs.jquery.com/Plugins/validation). El formulario que se está validando tiene imágenes de fondo personalizadas para los campos de entrada de texto, por lo que en lugar de mostrar un mensaje de error para los campos no válidos, me gustaría cambiar la imagen de fondo. Hacer las cosas un poco más complicadas es que la imagen de fondo para los campos está en un div diferente, completamente posicionado detrás del campo de texto (que tiene un fondo transparente y sin bordes). Me ahorraré yendo a los motivos de esta decisión de diseño aquí (está relacionada con los márgenes dentro del campo de texto) pero pensé que debería mencionarse ya que es fundamental para esta pregunta.

Por lo tanto, tengo dos preguntas:

1. ¿Cómo puedo detener la visualización de los mensajes de error de todos juntos?

2. ¿Cómo puedo vez digo el plugin de validación si, por ejemplo, el campo de nombre (por ejemplo <input id=name ... />) no es válido, entonces debe cambiar el fondo de la div relevante (por ejemplo <div id=name-bg... ></div>)?

¡Gracias por cualquier ayuda!

Answer 1

¿Cómo puedo detener la visualización de los mensajes de error juntos?

Esto se puede hacer mediante el uso de la opción showErrors del plug-in de validación:

$("#commentForm").validate({ 
    showErrors: function(errorMap, errorList) { 
      /* Custom error-handling code here */ 
     } 
    } 
}); 

El argumento errorList es una lista de objetos, cada uno con una propiedad element que es el elemento DOM con el error.

¿Cómo puedo vez digo el plugin de validación si, por ejemplo, el campo Nombre de no es válido, entonces debe cambiar el fondo para el div relevante?

El uso de la opción showErrors y el argumento errorList detallado anteriormente, se podría lograr esto así:

$("#commentForm").validate({ 
    showErrors: function(errorMap, errorList) { 
     var i, length = errorList.length; 
     var el; 

     for (i = 0; i < length; i++) { 
      el = errorList[i].element; 
      /* Build up a selector based on the element containing and error's id:*/ 
      $("#" + el.id + "-bg").show() // <-- write code against this selector 
     } 
    } 
}); 

Aquí es una prueba de concepto: http://jsfiddle.net/vD5cQ/

Espero que ayude!