JQuery: Kombination von 'jquery.table.addrow' und 'jquery.validate'

Yaslaw

Yaslaw

alter Rempler
Moderator
So, weiter gehts mit meinem JQuery Spiessrutenlauf.

Ich erweitere meine Formulat-Tabelle dynamisch mit jquery.table.addrow.
Die Felder will ich mit jquery.validate validieren.

Nun validiert mir der Validator aber nur die erste Zeile und nicht die generierten Zeilen

Ich weiss inzwischen, dass man mit live() auf die generierten Felder zugrieffen muss. Jedoch krieg ich das mit dem Validator nicht gebacken.

table.addrow: http://www.examplet.buss.hk/jquery/table.addrow.php
validator: http://bassistance.de/jquery-plugins/jquery-plugin-validation

So funktioniert es mit der ersten Zeile
Javascript: 
        $(document).ready(function(){
      	    $(".upload_form").validate();
        });


Nun hab ich im Web etwas gefunden, dass man ein Script so mit live() einwickeln kann. Das funktioniert aber nicht anderst als der eigentliche aufruf: Sprich, es validiert die erste Zeile
Javascript: 
        $(document).ready(function(){
        	$('.submit').live("click", function() {
        	    $(".upload_form").validate();
        	});
        });
 
So wie ich das verstehe, muss das Element, auf das die Methode validate() angewendet wird, ein Form-Element sein. Dein Problem wird sein, dass dein Formular direkt nach dem Laden (genauer gesagt, wenn das HTML-Dokument manipulierbar ist) ausgeführt wird. Vermutlich merkt sich das Skript die Elemente, die zu diesem Zeitpunkt existieren, und reagiert auf neue Elemente nicht, was aber traurig wäre.

Du könntest mal folgendes probieren:
Code: 
$(document).ready(function ()
{
  $('.submit').click(function ()
  {
    $('.upload_form').validate();
  });
});
 
Javascript ist zum wegwerfen.
Seit einer Stunde bringe ich den oben erwähnten Code nicht mehr zum Laufen. Es gibt keine Fehlermeldung und validert wird gar bix mehr. Der Browser ist neu gestartet, der Cache schon hundert mal gelehrt, der Code zurückgesetzt.
Kein Errormeldung die einem auch nur einen Hauch von Ansatz zur Fehlersuche gibt...

Javascript: 
        $(document).ready(function(){
            $(".upload_form").validate();
        });

Naja, dann schau ich mal nach einem anderen Validator um, denn so kommt man nie auf einen grünen Zweig (und ich weiss wider warum ich immer einen grossen Bogen um das Javascript gemacht habe)

Nachtrag:
Es geht nur mit dem FF nicht mehr. Trotz Neustart und löschen von allem temporären, zulassen von allen Scripten in irgendeiner Form (jepp, mein PC ist im Moment ein offenes Buch für alle Tracker!)....

Nachtrag2:
Ich arbeite inzwieschen bereits mit dem Nativ-Beispiel von http://docs.jquery.com/Plugins/Validation#Demos um herauszufinden warum mein FF auf einmal nicht mehr will. Auf der Demo-Seite funktioniert er. Derselbe Code auf meinem PC geht nicht. Das Script ist richtig eingebunden - mit dem IE gehts.
Die Anderen Scripte gehen es ist nur dieser Validator der nicht mehr geht.
Welchen Validator könnt ihr mir empfehlen?
 
Freude herscht.

Warum es wieder geht - keine Ahnung. Aber nachdem es wieder ging habe ich mich wieder an das Problem gesetzt und intensive Feldforschung betrieben.

Dabei merkte ich, dass der Validator im Hintergrund auf den Namen auflöst. Und der ist immer gleich. Das Problem wird hier erläutert: JQuery Validation for Array of Input Elements
Zu Beachten ist der Eintrag von Kobo um June 14, 2011 at 12:01 pm. Er schreibt den Handler auf die ID um. Ansonsten wird die Validierungsmeldung über alle Zeilen ausgegeben

Nun hatte ich das Problem, dass btnAddRow() beim hinzufügen der Zeile die ID eines Elementes 'nur' kopiert. Somit ist die ID nicht mehr eindeutig. Man kann jedoch in btnAddRow() einen Codeschnipsel mitgeben der ausgeführt wird.
Wenn man jetzt die id des Feldes sauber setzt (zB: id_file_0) kann man dem Code mittels regulären Ausdruck die Laufnummer extrahieren, um 1 erhöhen und wieder einsetzen.

Javascript: 
    <script type="text/javascript">
        //@param    <Pattern>    Ein RegExp-Pattern. Der Erste Treffer  muss den Preffix ausgeben, der 2te die Nummer
        //@param    <String>     Der HTML-Code in dem die id vorkommt
        function setNextId(pattern, code){
        	var parts = pattern.exec(code);            	 
        	var newid = parts[1] + (parseInt(parts[2])+1);
        	return code.replace(parts[0], newid);            
        }
    </script>
Wennjemand mir dagen kann, wie ich ein Pattern zur Laufzeit generieren kann, könnte das noch schöner aussehen.

Und das ist der Code für das hinzufügen der Zeile
Javascript: 
    <script type="text/javascript">
    //Zeilen hinzufügen/entfernen
        $("document").ready(function(){
        	//$("#autoTable").tableAutoAddRow({autoAddRow:true});
        	$(".addRow").btnAddRow(function(row){
            	//Die ID erweitern
            	var code = row.html();
                //Das Input-Feld id_file_0 erhöhen
                code = setNextId(/(id_file_)(\d+)/, code);
                //Das Input-Feld id_keywords_0 erhöhen
            	code = setNextId(/(id_keywords_)(\d+)/, code);
       		row.html(code);
        	});
        	$(".delRow").btnDelRow();
        });
    </script>

Und das ist das passende id_file_0 Feld
HTML: 
<td><input id="id_file_0" type="file" name="userfile[]" /></td>
<!-- in der hinzugefügten Zeile sieht es dann so aus
<td><input id="id_file_1" type="file" name="userfile[]" /></td>

Und mit dem Hack weiter oben, der der Validator auf die ID auflöst und das Feld nun eine eindeutige id hat - Jepp, es funktioniert!

So sieht jetzt der passende Validatoraufruf aus
Javascript: 
    <script type="text/javascript">
    $().ready(function() {
    	// validate the comment form when it is submitted
    	$("#upload_form").validate({
    		rules: {
    			"keywords[]": "required",
    			"userfile[]": "required"
    		},
    		messages: {
    			"keywords[]": "Bitte Kategorien angeben",
    			"userfile[]": "Datei fehlt"
    		}
    	});
    });   
    </script>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück