2009-08-06 20 views
1

jquery validation pluginとzend frameworkを使用しています。私はテーブルに私のフォームを持っています。私はテキストフィールドが検証されていないときにエラーとしてイメージを表示しています。エラーイメージは、同じtdのテーブルのテキストボックスのすぐ隣に表示されます。しかし、同じtrの次のtdにエラーメッセージ/イメージを表示したい。例えばjQuery Validation Plugin:テーブルの次の列(td)にエラーメッセージ/画像を表示

これは以前に提出されています

<table><tr><td>First Name</td><td><input type="text" class="required" /></td><td></td></tr></table> 

を、私は、これが後の空のフィールドに提出したい:

<table><tr><td>First Name</td><td><input type="text" class="required" /></td><td><img id='exclamation' src='images/exclamation.gif' title='This field is required.' /></td></tr></table> 

私はこれを使用していますが、今の機能をJS:

$(obj).find("input.required").each(function(){ 
     $(this).rules("add", { 
      required: true, 
      minlength: 2, 

      messages: { 

        required : "<img id='exclamation' src='images/exclamation.gif' title='This field is required.' />", 
        minlength: "<img id='exclamation' src='images/exclamation.gif' title='At least 2 characters.' />" 

      } 
     }); 
}); 

答えて

3

しばらくして私は答えを得た。実際には、検証プラグインで検証されない入力フィールドの次の列(td)に、コールアウト(エラーを含む)を含むイメージを表示するとします。入力フィールドが検証されると、このエラーイメージはそのコールアウトを使用して削除する必要があります。

私の解決策です。

$("form").validate({ 

    errorPlacement: function(error, element) { 

     //There should be an error 
     if(error.html() != ''){   

      element.parent().next().html("<img id='exclamation' src='images/exclamation.gif' />").callout({ 
       width  : 200, 
       cornerRadius : 8, 
       className : "validationCallout", 
       content  : error, 
       align  : "left", 
       nudgeHorizontal : -14, 
       nudgeVertical : 4, 
       arrowHeight : 6 
      });  
     } 
    }, 

    success: function(label) { 
     $(obj).find(".valid").parent().next().html("");   //remove error image from next column(td) of input containing "valid" class 
     $(obj).find(".valid").parent().next().closeCallout(); //remove callout on error image from next column(td) of input containing "valid" class 
    } 

}); 

このコードは複雑な可能性がありますが、今は私のために働いています。ここでは、質問に関連していないが、他の人に役立つ可能性のあるコールアウトプラグインが使用されています。 誰ももっと簡単にできますか?

関連する問題