jQuery検証プラグイン - カスタム背景の代わりにエラーメッセージなし

Question

jQuery検証プラグイン（http://docs.jquery.com/Plugins/validation）を使用しています。検証されているフォームには、テキスト入力フィールドのカスタム背景画像があるため、無効なフィールドのエラーメッセージを表示する代わりに、背景イメージを変更したいと思います。少し厄介なことは、フィールドの背景イメージがテキストフィールドの背後に絶対に配置されていることです（透明な背景と境界線はありません）。div私はここでこの設計決定の理由を考えています（テキストフィールド内のマージンに関係しています）が、この質問には非常に重要であるため、言及すべきだと思いました。

そのため、私は2つの質問がある：

1. がどのように私は、エラーメッセージの表示すべて一緒に停止することができます ？

2. たとえば、名前フィールド（たとえば<input id=name ... />）が無効で、関連するdivの背景を変更する必要がある場合（例：<div id=name-bg... ></div>）、検証プラグインに通知するにはどうすればよいですか。

ありがとうございます！

Answer 1

エラーメッセージの表示をすべて一緒に停止するにはどうすればよいですか？

あなたは検証プラグインのshowErrorsオプションを使用することによって、これを達成することができます

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

errorList引数は、オブジェクトのリストで、それぞれがエラーでDOM要素であるelementプロパティを含みます。

例えば、名前フィールド が、それは、関連のdivのため 背景を変更する必要があり、その後、無効である、場合どのように私は代わりに検証 プラグインを伝えることができますか？

showErrorsオプションと、上に詳述しerrorList引数を使用して、あなたはこのように、これを達成できます。

ここ

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

です、概念実証：http://jsfiddle.net/vD5cQ/

希望に役立ちます！