Fehlermeldung in Formmailer ausgeben

[Beilif99]

Hallo,

ich weiß, dass so ähnliche Fragen schon oft gestellt wurden - ich suche jetzt schon 6 Stunden rauf und runter - aber eben nicht die gleiche. Und ich bekomme es einfach nicht hin.

Mein Formular hat viele Felder, ich möchte gern Fehlermeldungen zurückgeben, wenn Pflichtfelder leergelassen worden sind.
Nun habe ich mir gedacht, ich könnte vor alle Felder einen versteckten <div> setzen mit der jeweiligen Fehlermeldung, den im Fehlerfall sichtbar machen und außerdem das Input-Feld in einer Signalfarbe umranden.

Mal zur Demo auf ein einziges Feld beschränkt - im Head:

<script language="JavaScript" type="text/javascript">
function chkFormular()
 {
        if(document.quot.getElementsById("cf3_field_2").value="") {
  document.quot.getElementsById("div-3-2").style.visibility = "visible";
  document.quot.getElementsById("cf3_field_6").style = "border-color:"#006600";
  return false;
  }
}
</script>
und im Body
(sorry für das Durcheinander hier - das Formular war mal ein cforms-Formular, dann habe ich es abgewandelt, um seine Ergebnisse in eine Datenbank einzuspeisen, cforms aber für das Design behalten - jetzt haben wir den Salat):

<form enctype="multipart/form-data" action="/link_PV.php" method="post" name="quot" class="cform" id="cforms3form" onSubmit="return chkFormular(this)">
...
<div id="div-3-2" style="visibility:hidden"><span style="color:#006600">Bitte geben Sie die Gesamt-Dachfläche ein:</span></div>
        <li id="li-3-2" class="">
          <label id="label-3-2" for="cf3_field_2">
            <span>Wie groß ist die Dachfläche gesamt (Breite mal Höhe)?</span>
            <br>
          </label>
          <input name="cf3_field_2" id="cf3_field_2" class="single fldrequired" value="" title="Geben Sie die Größe des Daches ein:" type="text">
</li>

Aber leider scheine ich etwas zu übersehen, denn es funktioniert nicht.
Hat jemand eine Idee, einen Hinweis, eine Korrektur, einen rettenden Befehl für mich?
Vielen Dank!

Beilif99

[ChrisB]

Hi,

Aber leider scheine ich etwas zu übersehen, denn es funktioniert nicht.

Gewöhne dir bitte an, beim entwickeln von JavaScript in die Fehlerkonsole eines vernünftigen Testbrowsers, bspw. Firefox, zu schauen.

if(document.quot.getElementsById("cf3_field_2").value="") {

Was soll document.quot sein, und wo soll es eine Methode namens getElementsById her haben?

MfG ChrisB

[Beilif99]

Hi,

Aber leider scheine ich etwas zu übersehen, denn es funktioniert nicht.

Gewöhne dir bitte an, beim entwickeln von JavaScript in die Fehlerkonsole eines vernünftigen Testbrowsers, bspw. Firefox, zu schauen.

if(document.quot.getElementsById("cf3_field_2").value="") {

Was soll document.quot sein, und wo soll es eine Methode namens getElementsById her haben?

MfG ChrisB

Hi,
danke für deine Antwort.
document.quot ist die Form quot (s.o., <form ... name="quot"> im Dokument. Nein? :)
okay, "getElementById" ist wohl besser, - funktioniert aber auch nicht.
Firefox muckt in der Fehlerkonsole nicht auf.
Vielleicht noch eine Idee?

Beilif99

[ChrisB]

Hi,

bitte zitiere sinnvoll - das, worauf du dich konkret beziehst, und nicht einfach alles.

document.quot ist die Form quot (s.o., <form ... name="quot"> im Dokument. Nein? :)
okay, "getElementById" ist wohl besser, - funktioniert aber auch nicht.

Dann lass mich meine vorherige Frage leicht verändert wiederholen:

Wo soll document.quot eine Methode namens getElementById her haben?

Firefox muckt in der Fehlerkonsole nicht auf.

Doch, tut er ganz bestimmt.
Du siehst es nur nicht, weil nach dem Fehler die Verarbeitung des JavaScript-Codes abgebrochen, und damit das Formular abgeschickt wird - womit du auf einer neuen Seite landest, und damit werden die Fehler auf der alten natürlich nicht mehr angezeigt.

MfG ChrisB

[Beilif99]

Wo soll document.quot eine Methode namens getElementById her haben?

Tja, woher ...
Mal so gefragt, woher hat das folgende Beispiel die Methode? (Daher habe ich es.)
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

Auf der klebrigen Ratespur, was du nun meinst, habe ich das "quot" einmal weggelassen. Nix.
Da bin ich nun neidisch - wieso funktioniert das da, und n~~~javascript icht hier?

<script type="text/javascript">
function chkFormular()
{
if(document.quot.cf3_field_3.value == "") {
alert("Bitte nutzbare eingeben!");
document.quot.cf3_field_3.focus();
return false

}  
</script>  
  
Das hier funktioniert, seltsamerweise.  
Wenn ich aber versuche, das nunmehr Geratene mit dem Funktionierenden zu verknüpfen, funktioniert es nicht:  
  
~~~javascript
<script language="JavaScript" type="text/javascript">  
function chkFormular()  
 {  
		if(document.quot.cf3_field_3.value == "") {  
  document.quot.div-3-2.style.visibility = "visible";  
  document.quot.cf3_field_2.style = "border-color:"#006600";  
  return false;  
  }  
}  
</script> 

Also, du siehst, ich versuche es schon, laufe aber immer wieder gegen die Wand. Bitte beende die Raterunde und gib mir den entscheidenden Hinweis, damit ich endlich in die Küche gehen und was essen kann, ja? :) Danke,

Beilif99

[ChrisB]

Hi,

Wo soll document.quot eine Methode namens getElementById her haben?

Tja, woher ...
Mal so gefragt, woher hat das folgende Beispiel die Methode? (Daher habe ich es.)
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

document besitzt die Methode getElementById, das ist schon mit DOM Level 1 so definiert.

Und da eine ID dokumentweit eindeutig zu sein hat, reicht es auch, wenn document alleine diese Methode besitzt.

document.quot.div-3-2.style.visibility = "visible";

Das kann nun wieder nicht funktionieren, weil das bedeuten würde, von document.quot.div erst mal den Wert 3, dann den Wert 2.style.visibility *abzuziehen* ... und dann soll dem Ergebnis dieser Berechnung auch noch was zugewiesen werden.
Das Minuszeichen ist nun mal der Subtraktions-Operator in JavaScript.

Also, du siehst, ich versuche es schon, laufe aber immer wieder gegen die Wand.

In SELFHTML nachlesen solltest du immer, bevor du Flecken an die Wand machst, die schwer wieder wegzukriegen sind.

Bitte beende die Raterunde und gib mir den entscheidenden Hinweis, damit ich endlich in die Küche gehen und was essen kann, ja? :) Danke,

Wer nachliest, muss nicht raten.
http://de.selfhtml.org/javascript/objekte/elements.htm#allgemeines, Schema #4 hilft weiter.

MfG ChrisB

[Beilif99]

Und da eine ID dokumentweit eindeutig zu sein hat, reicht es auch, wenn document alleine diese Methode besitzt.

Danke, das ist doch mal ein Wort.
Nur, wie gesagt, es funktionierte so herum wie so herum nicht. Insofern sind die gutgemeinten Rückfragen eben auch ein wenig irreführend gewesen.

document.quot.div-3-2.style.visibility = "visible";

Okay, da haben wir es.

In SELFHTML nachlesen solltest du immer, bevor du Flecken an die Wand machst, die schwer wieder wegzukriegen sind.

Danke, ich finde es gut, dass du überhaupt nicht versuchst beleidigend zu sein. Wenn du meinen Eingangspost nicht nur als Rückfragevorlage benutzt hättest, hättest du vielleicht gelesen, dass ich seit 6 Stunden auf der Suche war.

Wer nachliest, muss nicht raten.

Wer gute Antworten bekommt, muss nicht raten, was mit der Antwort gemeint ist. Nichts für ungut, ich weiß ja, dass du es gut meinst.
Irgenwie fällt mir gerade mein Großvater ein, der Lateinlehrer war; er meinte es auch gut (war übrigens außerdem Major der Wehrmacht und ein ziemlicher Sadist, der in der Schule mit dem Rohrstock unterrichtete, aber das ist eine andere Geschichte).

Danke euch allen. Wenn ich die Lösung gefunden habe, poste ich sie hier fürs Archiv, damit der Nächste nicht raten muss, sondern nachlesen kann. ;)

MfG Beilif99

[ChrisB]

Hi,

Nur, wie gesagt, es funktionierte so herum wie so herum nicht. Insofern sind die gutgemeinten Rückfragen eben auch ein wenig irreführend gewesen.

Ich versuche, dir die Fragen zu stellen, die du selber dir zu stellen offenbar versäumt hast.

Wenn du meinen Eingangspost nicht nur als Rückfragevorlage benutzt hättest, hättest du vielleicht gelesen, dass ich seit 6 Stunden auf der Suche war.

Wie lange du schon gesucht hast, ist hier doch uninteressant.

Wenn du nicht nach dem *richtigen* zu suchen in der Lage bist, dann solltest du *das* lernen.

Wer gute Antworten bekommt, muss nicht raten, was mit der Antwort gemeint ist.

Du sollst ja auch nicht raten, sondern überlegen.
Genau dazu will ich dich mit Rückfragen bringen.

MfG ChrisB

[fastix®]

Moin!

Danke euch allen. Wenn ich die Lösung gefunden habe, poste ich sie hier fürs Archiv, damit der Nächste nicht raten muss, sondern nachlesen kann. ;)

(04.06.2010, 16:34)

https://forum.selfhtml.org/?t=198246&m=1330873
(04.06.2010, 16:14)

Warum vermutest Du, dass einer im Archiv sucht, wenn Du Die Antworten auf Deine eigene Frage gar nicht liest?

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix

[Beilif99]

Und da eine ID dokumentweit eindeutig zu sein hat, reicht es auch, wenn document alleine diese Methode besitzt.

Danke, das ist doch mal ein Wort.
Nur, wie gesagt, es funktionierte so herum wie so herum nicht. Insofern sind die gutgemeinten Rückfragen eben auch ein wenig irreführend gewesen.

document.quot.div-3-2.style.visibility = "visible";

Okay, da haben wir es.

In SELFHTML nachlesen solltest du immer, bevor du Flecken an die Wand machst, die schwer wieder wegzukriegen sind.

Danke, ich finde es gut, dass du überhaupt nicht versuchst beleidigend zu sein. Wenn du meinen Eingangspost nicht nur als Rückfragevorlage benutzt hättest, hättest du vielleicht gelesen, dass ich seit 6 Stunden auf der Suche war.

Wer nachliest, muss nicht raten.

Wer gute Antworten bekommt, muss nicht raten, was mit der Antwort gemeint ist. Nichts für ungut, ich weiß ja, dass du es gut meinst.
Irgenwie fällt mir gerade mein Großvater ein, der Lateinlehrer war; er meinte es auch gut (war übrigens außerdem Major der Wehrmacht und ein ziemlicher Sadist, der in der Schule mit dem Rohrstock unterrichtete, aber das ist eine andere Geschichte).

Danke euch allen. Wenn ich die Lösung gefunden habe, poste ich sie hier fürs Archiv, damit der Nächste nicht raten muss, sondern nachlesen kann. ;)

MfG Beilif99

Wie angekündigt, poste ich hier die Lösung. Leider bin ich nicht dazu gekommen, spätere Antworten zu lesen. Ist aber vielleicht auch nicht wichtig.
(Mein Großvater übrigens, der auch ein Spezialist auf seinem Gebiet war, eben Latein, hat ja leider sein Spezialwissen benutzt, um andere runterzuputzen. Zum Glück kann so etwas hier nicht passieren - schließlich hat dieses Forum eine Charta, die u.a. diese Tipps für Antwortende enthält:
Als Stammposter trägst Du wesentlich zum Klima im Forum bei.

Antwortpostings der Art "Lies Dir erstmal das Kapitel CSS durch" oder "Die Antwort auf Deine Frage findest Du im Archiv" sind zu vermeiden.

Im SELFHTML-Forum definitiv nicht gern gesehen ist das nervige Gebaren von selbsternannten Forumspolizisten und Paragraphenreitern, die sich nur an formalen Mängeln von Beiträgen reiben und sonst keine Hilfe geben können. Das schließt eine Moderation (...) nicht aus, jedoch sollte diese behutsam und nebenbei geschehen und nicht zum Selbstzweck werden.

Vielleicht sind in dieser Klammer ja ein, zwei wertvolle Anregungen zum Nachdenken für einige dabei? :-) ).

Also, die Lösung! Im Head:

function chkFormular()  
 {  
  Fehlermeldung="";  
  
  if(document.quot.cf3_field_5.value == "") {  
  document.getElementById("div5").style.visibility = "visible";  
  document.quot.cf3_field_5.style.border = "2px solid #006600";  
  Fehlermeldung += "Bitte geben Sie die Dachneigung ein.\n";  
  document.quot.cf3_field_5.focus();  
  }  
  if(document.quot.cf3_field_2.value == "") {  
  document.getElementById("div2").style.visibility = "visible";  
  document.quot.cf3_field_2.style.border = "2px solid #006600";  
  Fehlermeldung += "Bitte geben Sie die Gesamt-Dachfläche ein.\n";  
  document.quot.cf3_field_2.focus();  
  }  
 (weitere Felder nach demselben Muster)  
  if(Fehlermeldung) {  
  alert(Fehlermeldung);  
  return false;  
  }  
  else {  
  return true;  
  }  
}  

Und im Body:

    <h2 style="padding-top:16px">  
      <a name="eingabe"></a>Beschreiben Sie Ihr Dach:</h2>  
    <p>(<span style="color:#006600"> <strong>*</strong></span> -Felder sind erforderlich)  
    </p>  
    <form enctype="multipart/form-data" action="/link_PV.php" method="post" name="quot" class="cform" id="cforms3form" onSubmit="return chkFormular(this)">  
      <ol class="cf-ol">  
        <li id="li-3-1" class="">  
          <label id="label-3-1" for="cf3_field_1">  
            <span>Betreff:  
            </span>  
          </label>  
          <select readonly="readonly" name="cf3_field_1" id="cf3_field_1" class="cformselect readonly" title="Bitte wählen Sie die Technik für Ihr Solardach aus:">				  
            <option value="Photovoltaikanlage" selected="selected">Photovoltaik-Anlage  
            </option>				  
            <option value="Solarthermie">Solarthermie-Anlage  
            </option>				  
            <option value="Kombi Photovoltaik / Solarthermie">Kombi-Anlage  
            </option>  
          </select>  
        </li>  
        <div id="div5" style="visibility:hidden"><span style="color:#006600">Bitte geben Sie die Dachneigung ein:</span></div>  
         <li id="li-3-5" class="">  
          <label id="label-3-5" for="cf3_field_5">  
            <span>Wie ist das Dach geneigt? *  
            </span>  
           </label>  
          <input name="cf3_field_5" id="cf3_field_5" class="single fldrequired" value="<?php echo $_GET['dachneigung']; ?>" title="Geben Sie die Dachneigung ein:" type="text">  
          <span class="reqtxt">  
          </span>  
        </li>  
        <div id="div2" style="visibility:hidden"><span style="color:#006600">Bitte geben Sie die Gesamt-Dachfläche ein:</span></div>  
        <li id="li-3-2" class="">  
          <label id="label-3-2" for="cf3_field_2">  
            <span>Wie groß ist die Dachfläche gesamt (Breite mal Höhe)? *  
            </span>  
          </label>  
          <input name="cf3_field_2" id="cf3_field_2" class="single fldrequired" value="" title="Geben Sie die Größe des Daches ein: " type="text">  
          <input name="cf3_field_2_regexp" id="cf3_field_2_regexp" value="^[0-9]+$" title="Geben Sie die Größe des Daches für Ihre Solaranlage in Ziffern ein: " type="hidden">  
          <span class="reqtxt">  
          </span>  
        </li>  
(Weitere Felder nach demselben Muster)  
             <input class="art-button" name="sendbutton3" id="sendbutton3" value="Berechnung und Vergleich anfordern" type="submit">  
    </form>

Grüße und nochmal Dank an alle hier, die mir wirklich geholfen haben!
Beilif99

[Struppi]

Grüße und nochmal Dank an alle hier, die mir wirklich geholfen haben!

Was ich nicht verstehe, dass du die Fehlermeldungen nicht gefunden haben willst.

Der Code in den ersten zwei Postings wirft 100% eine Fehlermeldung in der Fehlerkonsole im Firefox (oder anderen Browsern die eine Fehlerkonsole haben). Wenn du den Fehler nicht gefunden hast, ist entweder dein Browser kaputt oder du hast die Fehlerkonsole nicht gefunden.

Allein mit deren Hilfe wärst du in der Lage gewesen dein Problem selbst zu finden ohne Spezialwissen.

Struppi.

[EKKi]

Mahlzeit Beilif99,

Danke euch allen. Wenn ich die Lösung gefunden habe, poste ich sie hier fürs Archiv, damit der Nächste nicht raten muss, sondern nachlesen kann. ;)

Deine sogenannte "Lösung" ist keine. Außerdem war es nicht nötig, diese zu posten, da die Antwort auf eins Deiner Teilprobleme (<http://de.selfhtml.org/javascript/objekte/forms.htm#allgemeines@title="Schema 4">) bereits unzählige Male im Forumsarchiv zu finden ist.

MfG,
EKKi

[gast42]

document.quot.div-3-2.style.visibility = "visible";

Aus deinem Bindestrich wird hier ein Minus. Spätestens bei der Subtraktion von 3 von einem div wird's problematisch ...

[Gunnar Bittersmann]

@@Beilif99:

nuqneH

document.quot.div-3-2.style.visibility = "visible";

Die Sache mit dem Minus und dem Schema 4 wurde ja schon angesprochen …

document.quot.cf3_field_2.style = "border-color:"#006600";

… aber wieso meinst du, hier Style-Eigenschaft anders ändern zu können?

Unpaarige Anführungszeichen sollten dich auch stutzig werden lassen.

Und dann stolperst du wieder über ein (anderes) Minus und fällst auf den AˆHBoden.

Qapla'

[fastix®]

Moin!

  

> <form enctype="multipart/form-data" action="/link_PV.php" method="post" name="quot" class="cform" id="cforms3form" onSubmit="return chkFormular(this)">  
> ...  

     <div id="div-3-2" style="visibility:hidden;color:#006600">Bitte geben Sie die Gesamt-Dachfläche ein:</div>  

>           <input name="cf3_field_2" id="cf3_field_2" class="single fldrequired" value="" title="Geben Sie die Größe des Daches ein:" type="text">  

ENTWEDER: Du nimmst den Wert des FORMULAR-ELEMENTS mit dem NAME 'cf3_field_2' aus dem Formular 'quot' - dann notiere:
if (''==document.forms['quot'].elements['cf3_field_2'].value) {

ODER: Du nimmst den Wert des Elementes mit der ID 'cf3_field_2' aus dem (gesamten) HTML-Dokument - dann notiere:
if (''==document.getElementById('cf3_field_2').value {

Wie Dir schon mitgeteilt wurde hat das Formular "quot" keine Methode "getElementById".
Du kannst aber, wenn Du (wie Du es getan hast) Deinen Elementen des Dokumentes eine ID zugewiesen hast, diese wie folgt adressieren:

document.getElementById("div-3-2").style.visibility = "visible";

Ferner wird, wenn Du nur die Rahmenfarbe überschreiben willst, diese wie folgt gesetzt: Beachte das fehlende Minus und die Großschreibung:

("border-color" -> "borderColor")

Das wird immer so gemacht, wenn die CSS-Eigenschaft im Name dummerweise ein Minus hat.

document.getElementById("cf3_field_6").style.borderColor="#006600";

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix