Bei Klick geht Formatierung verloren

[Ferdi]

Hallo Forum,

Ich habe meine Formularfelder per CSS formatiert.

Weiterhin validiere ich die Usereingaben per Javascript vor dem Absenden des Formulares.

Blöderweise geht beim Klick auf den Absendebutton die Formatierung verloren.

Wer kann mir sagen, warum das so ist?

Zur Testseite

Grüße, Ferdi

[Matthias Apsel]

Om nah hoo pez nyeetz, Ferdi!

Wer kann mir sagen, warum das so ist?

ob es an den 7 Fehlern liegt, vermag ich nicht zu sagen, aber Validität ist eine Grundvoraussetzung für Dokumente, die wie gewünscht dargestellt werden sollen.

Matthias

[Ferdi]

ob es an den 7 Fehlern liegt, vermag ich nicht zu sagen, aber Validität ist eine Grundvoraussetzung für Dokumente, die wie gewünscht dargestellt werden sollen.

Ja, danke für Deinen wertvollen Hinweis.

Gruß, Ferdi

[ChrisB]

Hi,

Weiterhin validiere ich die Usereingaben per Javascript vor dem Absenden des Formulares.

Blöderweise geht beim Klick auf den Absendebutton die Formatierung verloren.

Wer kann mir sagen, warum das so ist?

Weil dein Script die Klasse "login_" der Formularfelder entfernt.

MfG ChrisB

[Ferdi]

Weil dein Script die Klasse "login_" der Formularfelder entfernt.

Hi Chris,

Kannst Du mir auch sagen, an welcher Stelle "mein" Script das macht?

Grüße, Ferdi

[Felix Riesterer]

Lieber Ferdi,

Kannst Du mir auch sagen, an welcher Stelle "mein" Script das macht?

wie, Du hast es nicht selbst geschrieben? Und dann vertraust Du auf seine Validierungsdienste? Du bist ja lustig! Wie sieht denn eine Validierung so aus? Was fütterst Du dem Script und was gibt es Dir zurück? Und was machst Du mit dem Ergebnis?

Ich habe keinerlei Reaktion Deines Validierers erkennen können - völlig egal ob und wenn ja was ich da in welches der beiden Felder eingegeben habe.

Liebe Grüße,

Felix Riesterer.

[Ferdi]

Ich habe keinerlei Reaktion Deines Validierers erkennen können - völlig egal ob und wenn ja was ich da in welches der beiden Felder eingegeben habe.

Hi Felix,

korrekt. Habe es auf der Testseite rausgenommen.

Danke für Deine Hilfe.

Ferdi

[Ferdi]

Weil, dann frag ich mal in anderen Javascriptforen nach.

Ich weiß, dass das ungerne gesehen wird, crosspostings auch über Foren hinweg zu machen, deshalb frag ich mal nach, ob das Thema hier durch ist.

Gruß, Ferdi

[Felix Riesterer]

Lieber Ferdi,

Weil, dann frag ich mal in anderen Javascriptforen nach.

vielleicht können die ohne die fehlenden Details besser helfen. Oder Du landest dort auch auf der Ignore-Liste...

frag ich mal nach, ob das Thema hier durch ist.

Hehe. Du musst nicht verstehen, wie das mit dem Helfen und Geholfenkriegen geht.

Liebe Grüße,

Felix Riesterer.

[Ferdi]

vielleicht können die ohne die fehlenden Details besser helfen.

Hi Felix,

welche fehlenden Details denn?

Mein Quellcode liegt komplett offen. Das Javascript liegt vor. Und der Effekt, dass die css-Formatierung (auch diese liegt vor) verloren geht, liegt ebenfalls vor.

Was also fehlt z.B. Dir noch? Browser? Ich nutze Firefox 5.0.

Was fehlt sonst noch?

Ferdi

[ChrisB]

Hi,

welche fehlenden Details denn?

Mein Quellcode liegt komplett offen. Das Javascript liegt vor. Und der Effekt, dass die css-Formatierung (auch diese liegt vor) verloren geht, liegt ebenfalls vor.

Was also fehlt z.B. Dir noch? Browser? Ich nutze Firefox 5.0.

Was fehlt sonst noch?

Die Eigeninitiative.
Dieses Forum ist kein Reparaturservice für Fremdscripte.

MfG ChrisB

[Ferdi]

Die Eigeninitiative.
Dieses Forum ist kein Reparaturservice für Fremdscripte.

Hallo?
Ihr erwartet, dass ich einen eigenen Formvalidator schreibe und somit das Rad neu erfinden soll?
Sachen gibts.
Ferdi

[Der Martin]

Hallo,

Dieses Forum ist kein Reparaturservice für Fremdscripte.
Ihr erwartet, dass ich einen eigenen Formvalidator schreibe und somit das Rad neu erfinden soll?

nein, natürlich nicht. Aber man kann erwarten, dass jemand zumindest weiß, was die Fremdscripte tun, die er/sie verwendet. Und wenn man von den Helfern schon so konkrete Hinweise bekommt, sollte man die Stelle im Code eigentlich auch recht schnell finden können.

Sachen gibts.

Du sagst es ...

Ciao,
 Martin

[Ferdi]

nein, natürlich nicht. Aber man kann erwarten, dass jemand zumindest weiß, was die Fremdscripte tun, die er/sie verwendet. Und wenn man von den Helfern schon so konkrete Hinweise bekommt, sollte man die Stelle im Code eigentlich auch recht schnell finden können.

Hi Martin,

nein, ich bin in Sachen javascript leider etwas überfordert. Ich lerne es gerade erst.

Also wo muß ich in dem Script danach suchen? Und etfernt das Script sie oder geht sie einfach nur verloren?

Gruß, Ferdi

[O'Brien]

Hi.

nein, natürlich nicht. Aber man kann erwarten, dass jemand zumindest weiß, was die Fremdscripte tun, die er/sie verwendet. Und wenn man von den Helfern schon so konkrete Hinweise bekommt, sollte man die Stelle im Code eigentlich auch recht schnell finden können.

nein, ich bin in Sachen javascript leider etwas überfordert. Ich lerne es gerade erst.

Also wo muß ich in dem Script danach suchen? Und etfernt das Script sie oder geht sie einfach nur verloren?

Also ich habe keine Ahnung von JavaScript, das vorab. Ich könnte mir jedoch vorstellen, dass in den Funktionen „Field.prototype.SetClass“ und „Field.prototype.ResetClass“ etwas an den Klassen geändert wird. Von alleine gehen sie sicherlich nicht verloren, irgendjemand oder -etwas sorgt also anscheinend dafür, dass sie irgendwann plötzlich weg sind. Die Vermutung liegt nahe, dass das Script dafür sorgt. (Vielleicht ändert das Script ja die Klasse, damit bei falschen Eingaben sofort ersichtlich ist, in welchem/n Feld/ern falsche Eingabe/n vorliegen?)

Wie gesagt, ich habe keine Ahnung von JavaScript. Aber die o. g. Funktionen wären für mich Ansatzpunkte, um das unerwünschte Verhalten zu suchen. Du solltest dich außerdem Stück für Stück mit dem gesamten Quelltext des Scripts vertraut machen und wenn du gar nicht weiterkommst, gezielt nachfragen.

Schönen Sonntag noch!
O'Brien

[Ferdi]

Hi,

Also ich habe keine Ahnung von JavaScript, das vorab. Ich könnte mir jedoch vorstellen, dass in den Funktionen „Field.prototype.SetClass“ und „Field.prototype.ResetClass“ etwas an den Klassen geändert wird.

Die habe ich kontrolliert, geändert und sogar komplett ersatzlos gestrichen. Dennoch bleibt der Effekt unverändert.

Von alleine gehen sie sicherlich nicht verloren, irgendjemand oder -etwas sorgt also anscheinend dafür, dass sie irgendwann plötzlich weg sind. Die Vermutung liegt nahe, dass das Script dafür sorgt.

Nein, da bin ich sicher, denn wenn ich es komplett gar nicht erst einbinde, bleibt die Formatierung erhalten.

Vielleicht ändert das Script ja die Klasse, damit bei falschen Eingaben sofort ersichtlich ist, in welchem/n Feld/ern falsche Eingabe/n vorliegen?)

Ja, das macht es. Dann wird lt. Firebug eine class='error' dorthin gesetzt. Die, bei denen die Klasse verlorengeht, haben dann lt. Firebug class='' dort stehen.

Wie gesagt, ich habe keine Ahnung von JavaScript.

Das geht mir leider sehr ähnlich. Danke für Deinen Ansatz.

Ferdi

[Felix Riesterer]

Lieber Ferdi,

Dann wird lt. Firebug eine class='error' dorthin gesetzt. Die, bei denen die Klasse verlorengeht, haben dann lt. Firebug class='' dort stehen.

ein selbstgeschriebenes Script täte das vermutlich nicht...

Liebe Grüße,

Felix Riesterer.

[O'Brien]

Hi.

Wie gesagt, ich habe keine Ahnung von JavaScript.

Das geht mir leider sehr ähnlich. Danke für Deinen Ansatz.

Hast du überhaupt schon mal irgendeine Programmiersprache erlernt? Wenn nicht, wäre jetzt ein guter Zeitpunkt dafür. Der Kommentar von Felix ist durchaus berechtigt, denn ohne zu wissen, was ein Script tut, kannst du dir echt Ärger einhandeln.

Vielleicht ändert das Script ja die Klasse, damit bei falschen Eingaben sofort ersichtlich ist, in welchem/n Feld/ern falsche Eingabe/n vorliegen?)

Ja, das macht es. Dann wird lt. Firebug eine class='error' dorthin gesetzt. Die, bei denen die Klasse verlorengeht, haben dann lt. Firebug class='' dort stehen.

Welche Funktion wird denn durch

<FORM ACTION="" METHOD=POST onSubmit="return validateStandard(this, 'error');">

aufgerufen, und was wird an diese Funktion übergeben?

Wenn ich das Script richtig lese, wird in der aufgerufenen Funktion, falls ein Fehler vorliegt, die Klasse „error“ gesetzt, und falls kein Fehler vorliegt, wird die Klasse zurückgesetzt, d.h. entfernt.

Was passiert, wenn du in der oben zitierten Quellcodezeile statt „'error'“ mal „'robbitobbi'“ einfügst?

Was passiert, wenn du in der aufgerufenen Funktion den Befehl zum Rücksetzen der Klasse durch das Setzen einer bestimmten Klasse ersetzt?

So würde ich mich, neben Zuhilfenahme einer JS-Einführung, an das Problem herantasten.

Schönen Sonntag noch!
O'Brien

[Ferdi]

Hi O'Brien,

Wenn ich das Script richtig lese, wird in der aufgerufenen Funktion, falls ein Fehler vorliegt, die Klasse „error“ gesetzt, und falls kein Fehler vorliegt, wird die Klasse zurückgesetzt, d.h. entfernt.

In erstem Punkt stimme ich Dir zu. Aber ich bin nicht sicher, ob die Funktion ResetClass nicht genau das tun sollte, was ich möchte, nämlich die alte Klasse wieder herstellen.
Letztlich macht sie allerdings, was Du vermutest, nämlich die Klasse komplett zurücksetzen.

Was passiert, wenn du in der oben zitierten Quellcodezeile statt „'error'“ mal „'robbitobbi'“ einfügst?

Schon klar, dann ändert sie entsprechend die Fehlerklasse auch.

Was passiert, wenn du in der aufgerufenen Funktion den Befehl zum Rücksetzen der Klasse durch das Setzen einer bestimmten Klasse ersetzt?

Breaking News: Du hast völlig Recht gehabt. Die Klasse wird zurückgesetzt und wenn ich diesen Befehl einfach auskommentiere, habe ich mein gewünschtes Ergebnis, nämlich das dann die alte Klasse erhalten bleibt.

Hast Du einen Schimmer, was das Zurücksetzen der Klasse für einen Sinn haben sollte?

So würde ich mich, neben Zuhilfenahme einer JS-Einführung, an das Problem herantasten.

Danke für Deine Debugginghilfestellung. In Perl und PHP gelingt mir sowas selber ganz gut, aber in Javascript laß ich mich immmer wieder von dem Codegewurschtel verunsichern.

Schönen Sonntag noch!
O'Brien

Dir auch, und danke nochmal

Ferdi

[O'Brien]

Hi.

Was passiert, wenn du in der aufgerufenen Funktion den Befehl zum Rücksetzen der Klasse durch das Setzen einer bestimmten Klasse ersetzt?

Breaking News: Du hast völlig Recht gehabt. Die Klasse wird zurückgesetzt und wenn ich diesen Befehl einfach auskommentiere, habe ich mein gewünschtes Ergebnis, nämlich das dann die alte Klasse erhalten bleibt.

Ob das eine gute Idee ist, den Befehl einfach auszukommentieren, weiß ich nicht. Hätte er an dieser Stelle keinen Sinn, so stünde er da vermutlich nicht.

Hast Du einen Schimmer, was das Zurücksetzen der Klasse für einen Sinn haben sollte?

Ich habe da so einen Verdacht. Wie verhält sich das Script hinsichtlich der Klassen, wenn du mehrfach das Formular absendest? Was passiert, wenn du in Feld A beim ersten Mal einen falschen und in Feld B einen richtigen, beim zweiten Absenden hingegen in Feld A einen richtigen und in Feld B einen falschen Wert einsetzt? Vergib im CSS die Klassen vorher so, dass du Unterschiede auf jeden Fall bemerkst.

So würde ich mich, neben Zuhilfenahme einer JS-Einführung, an das Problem herantasten.

Danke für Deine Debugginghilfestellung. In Perl und PHP gelingt mir sowas selber ganz gut, aber in Javascript laß ich mich immmer wieder von dem Codegewurschtel verunsichern.

Gerne. Ob ich mit meinen Vermutungen richtig liege, muss du selbst herausfinden. Aber bitte beachte wirklich: einfach etwas auszukommentieren, von dem man nicht weiß, was es macht, ist keine gute Idee. Von daher versuch, das Script zu verstehen und frag hier nach, wenn du nicht weiterkommst. Wenn du dem SELF-Gedanken folgst, wirst du auch von den JS-Profis hier im Forum Hilfe bekommen.

Schönen Sonntag noch!
O'Brien

[Ferdi]

Hi O'Brien,

Ob das eine gute Idee ist, den Befehl einfach auszukommentieren, weiß ich nicht. Hätte er an dieser Stelle keinen Sinn, so stünde er da vermutlich nicht.

Naja, aber was soll schon passieren? Es werden keine Fehleinträge in der Datenbank daraus resultieren und die Formulare werden abgeschickt.

Was passiert, wenn du in Feld A beim ersten Mal einen falschen und in Feld B einen richtigen, beim zweiten Absenden hingegen in Feld A einen richtigen und in Feld B einen falschen Wert einsetzt?

Habe ich grad mal ausprobiert. Läuft sauber durch und vermeldet genau das, was es soll als Fehlermeldung.

Vergib im CSS die Klassen vorher so, dass du Unterschiede auf jeden Fall bemerkst.

Da bin ich jetzt nicht sicher, was Du damit meinst.

Gerne. Ob ich mit meinen Vermutungen richtig liege, muss du selbst herausfinden.

Zumindest merkt man Dir deutlichen Erfahrungsschatz an. Du hast nen guten Riecher und gehst die Sache sehr logisch an. Auch daraus lernt ein Fragender (wie ich).

Aber bitte beachte wirklich: einfach etwas auszukommentieren, von dem man nicht weiß, was es macht, ist keine gute Idee. Von daher versuch, das Script zu verstehen und frag hier nach, wenn du nicht weiterkommst. Wenn du dem SELF-Gedanken folgst, wirst du auch von den JS-Profis hier im Forum Hilfe bekommen.

Ok. Dann will ich mal:

Liebe JS-Profis, was macht diese Funktion hier:

  
Field.prototype.ResetClass = function(){  
	if ( (this.type != "button") && (this.type != "submit") && (this.type != "reset") ) {  
   		if ( (this.elements) && (this.elements.length > 0)) {  
      		for (var i = 0; i < this.elements.length; ++i){  
      			if(this.elements[i].oldClassName){  
         	 	  this.elements[i].className = this.elements[i].oldClassName;  
         	 	}  
         	 	else {  
    	  	 	  this.element.className = "";  
    	  		}  
      		}  
   		}else{  
   			if(this.elements.oldClassName){  
    	  	  this.element.className = this.element.oldClassName;  
    	  	}  
    	  	else {  
    	  	  this.element.className = "";  
    	  	}  
   		};  
	};  
};  

Schönen Sonntag noch!
O'Brien

Selber auch und danke nochmal :-)

Ferdi

[ChrisB]

Hi,

Liebe JS-Profis, was macht diese Funktion hier:

Field.prototype.ResetClass = function(){
if ( (this.type != "button") && (this.type != "submit") && (this.type != "reset") ) {
    if ( (this.elements) && (this.elements.length > 0)) {
       for (var i = 0; i < this.elements.length; ++i){
       if(this.elements[i].oldClassName){
            this.elements[i].className = this.elements[i].oldClassName;
          }
          else {
          this.element.className = "";
        }
       }
    }else{
    if(this.elements.oldClassName){
          this.element.className = this.element.oldClassName;
        }
        else {
          this.element.className = "";
        }
    };
};
};

  
Im wesentlichen das, was ihr Name schon aussagt - die Klasse zurücksetzen.  
  
Wenn es sich bei dem Element, „auf“ dem sie aufgerufen wird, um einen Formular-Button handelt – dann lässt sie einfach die Finger davon.  
Andernfalls, wenn es sich um ein Formular handelt, durchläuft sie alle dessen Elemente – oder kümmert sich, wenn es nur ein spezifisches Formularelement ist, nur um dieses.  
Beim zurücksetzen schau sie, ob ein vorheriger Inhalt des class-Attributes in der Eigenschaft oldClassName zwischengespeichert wurde – wenn ja, stellt sie diesen wieder her, andernfalls weist sie einen Leerstring zu.  
  
Da scheint mir auch der Fehler zu liegen – denn offenbar kommt der Autor hier selber damit durcheinander, auf was er eigentlich gerade operiert.  
this.elements, this.elements[i] und this.element werden hier so bunt gemixt angesprochen, dass das kaum einen Sinn ergibt.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

[O'Brien]

Hi.

Was passiert, wenn du in Feld A beim ersten Mal einen falschen und in Feld B einen richtigen, beim zweiten Absenden hingegen in Feld A einen richtigen und in Feld B einen falschen Wert einsetzt?

Habe ich grad mal ausprobiert. Läuft sauber durch und vermeldet genau das, was es soll als Fehlermeldung.

OK.

Vergib im CSS die Klassen vorher so, dass du Unterschiede auf jeden Fall bemerkst.

Da bin ich jetzt nicht sicher, was Du damit meinst.

Du kannst natürlich auch im Firebug sehen, welche Klasse dem Element durch das Skript zugewiesen wurde. Ich bin allerdings mehr ein Freund der optischen Erkennung, d. h. man sollte auf den ersten Blick sehen, welche Klasse das jeweilige Element gerade hat (z. B. rot umrahmt für Fehler, grün hinterlegt für OK, cyan dotted umrahmt für keine Klasse).

Zumindest merkt man Dir deutlichen Erfahrungsschatz an. Du hast nen guten Riecher und gehst die Sache sehr logisch an. Auch daraus lernt ein Fragender (wie ich).

Meine Herangehensweise ist wahrscheinlich beruflich bedingt, von daher nichts Besonderes.
Aber danke für die Blumen. :)

Schönen Sonntag noch!
O'Brien

[Felix Riesterer]

Lieber Ferdi,

Hallo?
Ihr erwartet, dass ich einen eigenen Formvalidator schreibe und somit das
Rad neu erfinden soll?

wenn Du Fremdscripte nicht zu nutzen imstande bist, ja. Außerdem hast Du bis jetzt noch nicht erklärt, wie eine Validierung überhaupt ablaufen soll. Das ist für mich das erste und entscheidende Detail.

Willst Du denn z.B. nur prüfen (prüfen ist nicht validieren!), ob die Felder auch brav alle ausgefüllt wurden, oder prüfst Du auch, ob die eingegebenen Inhalte plausibel sind (_das_ wäre "validieren")?

Egal was Du wie prüfen willst, Dein Fremdscript scheint mir eher eine Art Overkill in die Richtung zu sein, die Du gar nicht benötigst. Da wäre das eigene Schreiben eines "Formvalidators" sicher sinnvoller, da er genau das prüft, was Du haben willst.

Liebe Grüße,

Felix Riesterer.