Schwieriger wird es schon wenn mehrere Plugins auf ein Formular angewendet werden, bei denen die Plugins eigene DOM-Elemente hinzufügen. Beispielsweise jqTransform

Glücklicherweise bietet das validate Plugin dafür eine wunderbare Funktion, nämlich errorPlacement.
Die Funktion sieht so aus:

1
2
3

 errorPlacement: function(error, element) {
     error.appendTo( element.TRAVERSINGFUNKTION );
   },

Nehmen wir ein Formular:

1
2
3
4
5
6
7

<form action="somescript.php" id="form" method="get">
   <input type="text" name="user">
   <label><label> 
   <input type="text" name="pw">
   <label><label>
</form>
 <div id="error"></div>

Per Default wird vom validate Plugin ein Label-Tag hinter jedes input-Feld eingefügt. Will man nun den error an einer anderen Stelle zeigen kann man die Funktion folgendermaßen umschreiben:

1
2
3
4
5

$("#form").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.next() );
   }   
});

Die Fehlermeldungen würde nun ausgehend vom input (element) in das nächste DOM Element, in unserem Fall das label-Tag, geschrieben werden.
Natürlich haben wir mit diesem Beispiel nur wieder das Ausgangsverhalten des Plugins erreicht. Dieses Prinzip lässt leicht auf komplexere Anwendungsfälle übertragen. Wie beispielsweise bei erwähntem jqTransform, bei dem um das input-Feld mehrere Divs gelegt werden. Die Fehlermeldung des Validate Plugins wird dann unterhalb (auf z-Ebene) der Felder angezeigt. Durch travesieren durch den DOM-Baum können die Fehlermeldungen beliebig positioniert werden.

Ähnliche Artikel

• 12. August 2009 -- jQuery Form Plugin – Do some AJAX magic easily
• 4. August 2009 -- Formularfelder vorausfüllen und leeren mit jQuery Clearfield
• 30. Juni 2009 -- jQuery myPass – password hiding iPhone-Style

1
2
3

var debuggen = new jQuery.debug();
// ...
debuggen.dump(Object);

Nun noch ein kleines Beispiel dazu:

1

<input name="LieferName"  value="" class="validate['required','length[6,-1]']" type="text" id="LieferName" />

Der Code um sich das Objekt näher anzuschauen kann wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12

debug = new jQuery.debug({
	posTo : { x:'right', y:'bottom' },
	width: '480px',
	height: '50%',
	itemDivider : '<hr>',
	listDOM : [ 'tagName','id', 'innerText', 'href','value' ]
	});
 
function showMeDebug(){
  var input = $('LieferName');
  debug.dump(input);
}

Hier würde jetzt nach Aufruf der Funktion showMeDebug auf der unteren rechten Seite des Bildschirms eine Box, in der alle alle Attribute des “listDOM” für das Objekt “input” stehen, angezeigt.
Für ein Formularfeld ist diese Funktion nur teilweise interessant. Sinnvoller ist der Einsatz des Debuggers für komplexe Objekte vor allem natürlich Klasseninstanzen.

Zu beachten ist, dass vor “debug = new jQuery.debug” u. U. die “var” Deklaration von JavaScript stehen und “jQuery” durch $ ersetzt werden muss. Obiges Skript wurde im noConflict Mode von jQuery ausgeführt.

Ähnliche Artikel

• 4. September 2009 -- Praxistip: Output Element des jQuery Validate Plugin ändern
• 18. Mai 2009 -- jQuery noConflict Mode
• 20. Juli 2010 -- jMediaelement – jQuery HTML5 Audio-Video Kit