Wtyczka sprawdzania poprawności jQuery - brak komunikatów o błędach zamiast niestandardowych środowisk

Question

Używam wtyczki sprawdzania poprawności jQuery (http://docs.jquery.com/Plugins/validation). Sprawdzana forma ma niestandardowe obrazy tła dla pól wprowadzania tekstu, więc zamiast wyświetlać komunikat o błędzie dla nieprawidłowych pól, chciałbym zmienić obraz tła. Robienie rzeczy nieco trudniejszych polega na tym, że obraz tła dla pól znajduje się na innym div bezwzględnie umieszczonym za polem tekstowym (które ma przezroczyste tło i bez obramowania). Oszczędzę się w uzasadnieniu tej decyzji projektowej (jest to związane z marginesami w polu tekstowym), ale pomyślałem, że należy o tym wspomnieć, ponieważ ma to kluczowe znaczenie dla tego pytania.

Dlatego mam dwa pytania:

1. Jak mogę zatrzymać wyświetlanie komunikatów o błędach wszystko razem?

2. Jak mogę zamiast powiedzieć plugin sprawdzania poprawności, gdy na przykład, w polu Nazwa (np <input id=name ... />) jest nieważna to powinno zmienić tło dla właściwego div (np <div id=name-bg... ></div>)?

Dzięki za pomoc!

Answer 1

Jak mogę zatrzymać wyświetlanie komunikatów o błędach razem?

Można to zrobić za pomocą opcji wtyczki validate showErrors:

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

errorList argumentem jest lista obiektów, z których każda zawiera właściwość element że to element DOM z błędem.

Jak mogę zamiast powiedzieć wtyczki walidacja jeśli, na przykład, w polu Nazwa jest nieprawidłowy to powinno zmienić tło dla właściwej div?

Użycie opcji showErrors i errorList argumentu opisaną powyżej, można to osiągnąć tak:

$("#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 
     } 
    } 
}); 

Oto proof-of-concept: http://jsfiddle.net/vD5cQ/

nadzieję, że pomoże!