Wie funktioniert die Validierung von jQuery Tools in einem Overlay-Dialog?

Question

Ich habe einen einfachen Texteingabe-Dialog, der mit jQT-Overlays arbeitet - klicke auf einen Link, öffne ein Overlay mit dem Formular, fülle das Formular aus, drücke submit und das Formular wird bearbeitet. Ich versuche nun, dem Formular eine Validierung hinzuzufügen, aber die Validierung findet nie statt. Wenn ich das Overlay auf dem Link deaktiviere und das Formular in einem separaten Fenster öffne, funktioniert die Validierung einwandfrei. Daher bin ich mir ziemlich sicher, dass ich die grundlegenden Validierungsfunktionen ordnungsgemäß eingerichtet habe. Diese No-Overlay-Version ist effektiv, was in http://flowplayer.org/tools/demos/validator/index.html passiert - eine Seite, die ein Formular enthält, wird geladen, die Validierung wird eingerichtet und der Validierungscode wird auf Formular-Senden ausgeführt.

Das Problem mit der Overlay-Version, denke ich, ist, dass die Validierung nicht ordnungsgemäß eingerichtet wird, höchstwahrscheinlich, weil das Formular nicht gefunden wird. Das Überlagerungsformular existiert erst, wenn auf den Link geklickt wird. Daher kann der Aufruf von validator() nicht auf der Hauptseite sein, die den Link enthält. Ich habe versucht, ein SCRIPT-Tag mit dem Aufruf validator() an das Ende des Formularcodes zu heften, wenn es erstellt wird, aber das funktioniert nicht. Das Aufrufen von validator() für die entsprechende ID erfolgt auch nicht innerhalb des jQuery-Codes, der das Overlay-Formular erstellt. In allen Fällen werden keine JavaScript-Fehler in der Konsole angezeigt. Arggh.

Ich würde denken, dies ist eine häufige Verwendung von jQT-Formulare und Validierung, aber ich kann einfach nicht herausfinden, was hier vorgeht (oder nicht hier). Irgendein Rat? Vielen Dank!

Answer 1

sollten Sie in der Lage sein, gerade in der Überlagerung in das onLoad Ereignis tippen:

$("#dialog").overlay({ 
    load: true, 
    onLoad: function() { 
     $("#form").validator(); 
    }, 
    onBeforeClose: function() { 
     $("#form").data("validator").reset(); 
    } 
}); 

Edit: Added onBeforeClose Handler die Formularvalidierung beim Schließen des Overlay zurückgesetzt werden. Stellen Sie außerdem sicher, dass die z-index CSS-Eigenschaft für Fehler über der Z-Index der Überlagerung ist.

Ich bin mir jedoch nicht sicher, warum Sie den Anruf nicht außerhalb des Overlay-Setup-Codes auf validator() setzen könnten. der Aufruf von Validator() kann nicht mit dem Link

Diese nicht in der Haupt-Seite sein, ist

Die Overlay-Form existiert nicht bis wird der Link angeklickt, so ganz recht: Wenn Sie Ihren HTML-Code mit FireBug untersuchen, sehen Sie, dass die Überlagerungselemente nur versteckt sind und angezeigt werden und CSS auf das div angewendet wird, damit es wie ein modaler Dialog aussieht. Die form sollte immer im DOM vorhanden sein.

Schauen Sie sich ein funktionierendes Beispiel hier: http://jsfiddle.net/andrewwhitaker/SYPSG/