Nach erfolgreicher Formvalidierung Seite mit Loader sperren

[michelle]

Hallo

Ich wende mich nach erfolgloser Suche an euch. Ich habe auf meiner PHP-Site Formulare, welche vor dem Senden mit dem TMT-Validator (www.massimocorner.com/libraries/validator/) (vor)validiert werden. Das klappt wunderbar.
Ich möchte nun nach erfolgreicher Validierung ein Div mit einem Loaderimage über die Seite legen, damit nicht rumgeklickt werden kann. Das Schreiben in die DB dauert z.T. ein bisschen.

Ich finde beim besten Willen keine Lösung wie ich das kombinieren kann (möglicherweise auch mangels JS-Kenntnissen ;-).
Auf den Seiten welche "nur" eine DB-Abfrage machen, klappt es wunderbar wenn auf dem Submit-Button via onclick der Div mit dem Loaderimage auf 'show' gesetzt wird. Falls PHP eine Fehlermeldung zurückgibt schliesst sich nach dem Wegklicken des Alerts das Div und man kann eine erneute Eingabe tätigen.

Wenn aber das TMT-Script zuschlägt, blockiert nach dem Schliessen des Alerts noch das Div mit dem Loaderimage die Seite.

Meine Idee war in dem tmt-validator.js an der richtigen Stelle den 'show' auszulösen - also wenn eben keine Fehler mehr gefunden werden. Dieses Script ist für mich leider zu Komplex es zu verstehen.
Kann jemand helfen? Mir im besten Fall sagen an welcher Stelle ich was genau einsetzen muss :-D

Vielen Dank und liebe Grüsse,
Michelle

[unknown]

http://forum.jswelt.de/javascript/58026-reihenfolge-form-validation-loader-gif.html

[Michelle]

http://forum.jswelt.de/javascript/58026-reihenfolge-form-validation-loader-gif.html

Danke für den Link.

Leider wird dort die Frage (bisher) nicht beantwortet....

[unknown]

Leider wird dort die Frage (bisher) nicht beantwortet....

Vermutlich, weil keiner versteht, was überhaupt dein Problem ist.
Soweit ich das verstanden habe, blendest du im onsubmit per Skript ein Bild ein.
Einmal gehen die Daten dann direkt an den Server, werden dort geprüft und die neue Seite wird ohne Bild, evtl. mit Fehlermeldung, neu geladen und alles ist gut.
Ein anderes mal bindest du aber zusätzlich zu den Ladebildskript noch ein Validierungsskript ein. Meldet das dann einen Fehler, werden die Daten nicht an den Server gesendet. Die Seite wird damit nicht neu geladen und das Bild aus dem Ladebildskript bleibt sichtbar.
So richtig?
Hat der Validator denn ein callback, wo du im Fehlerfall diesen anzeigst? Dann blende dort das Ladebild einfach wieder aus. Oder blende es erst dort ein, wenn du das Validierungsskript nutzt.

[Michelle]

So richtig?

Ja ganz genau so

Hat der Validator denn ein callback, wo du im Fehlerfall diesen anzeigst? Dann blende dort das Ladebild einfach wieder aus. Oder blende es erst dort ein, wenn du das Validierungsskript nutzt.

ähm... Halb verstanden :-/ der validator gibt jeweils ein Alert aus, das noch was falsch ist. Bis alle Felder korrekt sind gehts nicht weiter.

Nach meiner Logik darf das Ladebild nicht auf dem Submitbutton eingeblendet werden (wenn der Validator vorhanden ist) sondern muss irgendwo in diesem Validator-Script stehen.

"Wenn alles korrekt ist; dann blende Bild ein bevor die Daten an DB übergeben werden."

Da liegt genau das Problem; Ich kapiers eh nicht da Designer/HMTL/CSS-Kennerin und mein Partner hat's bisher nicht hingekriegt in dem tmt_validator.js

Merci und Gruss,
Michelle

[unknown]

ähm... Halb verstanden :-/ der validator gibt jeweils ein Alert aus, das noch was falsch ist. Bis alle Felder korrekt sind gehts nicht weiter.

Man kann aber auch ein Callback übergeben, das wird im Fehlerfall aufgerufen. Dort kannst du 1. die Fehler schöner ausgeben und 2. dein Bild ausblenden

[Michelle]

Man kann aber auch ein Callback übergeben, das wird im Fehlerfall aufgerufen. Dort kannst du 1. die Fehler schöner ausgeben und 2. dein Bild ausblenden

Danke für den Input - probieren wir aus. Habe früher mal mit den diversen Fehlerausgaben rumprobiert und das Alert gefiel mir schlussendlich am besten. Aber wenns das andere Problem löst.... Melde mich wieder ;-)

[Michelle]

Man kann aber auch ein Callback übergeben, das wird im Fehlerfall aufgerufen. Dort kannst du 1. die Fehler schöner ausgeben und 2. dein Bild ausblenden

Danke für den Input - probieren wir aus. Habe früher mal mit den diversen Fehlerausgaben rumprobiert und das Alert gefiel mir schlussendlich am besten. Aber wenns das andere Problem löst.... Melde mich wieder ;-)

Die andere Form von Fehleranzeige funktioniert nun zwar. Aber ich weiss immer noch nicht wie ich mein Loeader anzeigen kann nachdem alle Validierungen OK sind. folgendes Script ist nun zusätzlich auf der Seite:

  
<script type="text/javascript">  
function displayError(formNode, validators){  
	var listNode = document.createElement("ul");  
	for(var i=0;i<validators.length;i++){  
		var itemNode = document.createElement("li");  
		itemNode.appendChild(document.createTextNode(validators[i].message));  
		listNode.appendChild(itemNode);  
	}  
	var displayNode = document.getElementById("errorDisplay");  
	displayNode.style.display = "block";  
	displayNode.replaceChild(listNode, displayNode.firstChild);  
}  
// ]]>  
</script>  

Was mir daran allerding missfällt, ist das wir nun von php Alerts haben und vom Validator eine Andere Form von Fehlerausgabe.

[unknown]

Die andere Form von Fehleranzeige funktioniert nun zwar. Aber ich weiss immer noch nicht wie ich mein Loeader anzeigen kann nachdem alle Validierungen OK sind.

Willst du den Loader anzeigen oder verschwindet er im Fehlerfall nicht mehr? Ich dachte bisher letzteres. Wenn es das ist, rufe einfach deine MM_showHideLayers Funktion in displayError auf. Bei ersterem musst du zusätzlich noch diese Funktion im onsubmit aufrufen.

Was mir daran allerding missfällt, ist das wir nun von php Alerts haben und vom Validator eine Andere Form von Fehlerausgabe.

Ich würde im php die gleiche Ausgabe machen, du kannst allerdings in displayError auch einfach ein alert machen.

[Michelle]

Wie auch immer, aber ich habs auf irgend eine Geiss-Art hinbekommen. Verstehen tu ichs ned aber es funktioniert :-)

Danke fürs hinführen...

Grüesse,
Michelle