jQuery Validierungs-Plugin: Zeigen Sie Ihre Fehlermeldung/Bild in der nächsten Spalte (td) der Tabelle

Question

Ich benutze jquery Validierung Plugin und Zend-Framework. Ich habe meine Form in einer Tabelle. Ich zeige ein Bild als Fehler an, wenn ein Textfeld nicht validiert wird. Das Fehlerbild wird sehr neben dem Textfeld in derselben Tabelle angezeigt. Aber ich möchte Fehlermeldung/Bild in der nächsten td der gleichen tr zeigen.

Zum Beispiel ist dies vor einreichen:

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

Ich mag diese, nachdem sie mit leerem Feld einreichen:

<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> 

Ich verwende diese js Funktion für jetzt:

$(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.' />" 

      } 
     }); 
}); 

Answer 1

Nach einiger Zeit bekam ich meine Antwort. Infact Ich möchte ein Bild mit einem Callout (mit Fehler) in der nächsten Spalte (td) des Eingabefeldes anzeigen, das nicht vom Validierungs-Plugin validiert wurde. Und wenn ein Eingabefeld validiert wird, sollte dieses Fehlerbild mit seinem Callout entfernt werden.

Hier ist meine Lösung.

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

}); 

Dieser Code kann komplex sein, aber es funktioniert jetzt für mich. Hier wird ein Callout-Plugin verwendet, das nicht mit der Frage verwandt ist, aber anderen helfen kann. Kann jemand es einfacher machen?