jQuery doğrulama eklentisi - hata mesajları yerine özel arka planlar

Question

jQuery doğrulama eklentisini kullanıyorum (http://docs.jquery.com/Plugins/validation). Doğrulanan formun metin giriş alanları için özel arka plan resimleri vardır, bu nedenle geçersiz alanlar için bir hata mesajı göstermek yerine arka plan resmini değiştirmek istiyorum. İşleri biraz daha zorlaştırmak, alanlar için arka plan görüntüsünün, metin alanının arkasında (şeffaf bir arka plan ve sınırsız) bulunan farklı bir div üzerindedir. Bu tasarım kararının nedenlerine (metin alanı içindeki marjlarla ilgili) gitmekten vazgeçeceğim, ancak bu soru için kritik öneme sahip olduğundan bahsetmem gerektiğini düşündüm.

Dolayısıyla iki soru var:

1. nasıl hata iletilerinin görüntülenmesini hepsi bir arada durdurabiliriz ?

2. Nasıl örneğin, ad alanı (ör <input id=name ... />) o zaman ilgili div (örneğin <div id=name-bg... ></div>) için arka plan değiştirmelisiniz geçersiz, eğer yerine doğrulama eklentisi söyleyebilir?

Yardımlarınız için teşekkürler!

Answer 1

hata mesajlarının tümünü nasıl birlikte durdurabilirim?

doğrula eklentinin showErrors seçeneği kullanılarak bu yapabilirsiniz:

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

errorList bağımsız değişken nesnelerin bir listesi, her hata ile öğe veya bir element özelliğini içeren.

örneğin, ad alanı alakalı div arka planı değiştirmelisiniz sonra geçersiz, olmadığını nasıl yerine doğrulama eklentisi söyleyebilir?

showErrors seçeneği ve yukarıda ayrıntıları errorList argüman kullanarak, böyle bunu başarabilir:

İşte

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

olan bir kanıtı kavram: http://jsfiddle.net/vD5cQ/

Hope yardımcı olur!