LilliLy: Überprüfung eines Formulars

SELF-Forum

Überprüfung eines Formulars

LilliLy
– Informationen zu den Bewertungsregeln

hallo,

ich habe ein Formular erstellt das ich mit JavaScript überprüfen lassen möchte. Nur leider funktioniert da gar nix. Es wird nicht überprüft und das Formular wird direkt an die Mail-Adresse geschickt. selbst wenn ich das Formular ausfülle steht in der ankommenden Mail nichts drin. Wenn ich die Seite öffne wird sie ebenfalls verschickt. Seit wochen sitze ich davor und kann keinen Fehler finden. Dazu kommt das ich von JavaScript überhaupt keine Ahnung habe und ich es echt versuche zu verstehen. Bitte helft mir, da es nun auch sehr eilig wird und ich nicht mehr weiß was ich machen soll. Schon mal Danke.



<Script language="JavaScript">

// Formular-Checker
function check(forms){
name=document.forms[0].elements[0].value;
email=document.forms[0].elements[1].value;

mailat=email.indexOf("@");
maildot=email.indexOf(".");

if(strasseobjekt==""){alert("Bitte &uuml;berpr&uuml;fen Sie die Stra&szlig;e des Objektes!");
document.forms[0].elements[0].focus();
return(false);}

if(hausnummmerobjekt==""){alert("Bitte &uuml;berpr&uuml;fen Sie die Hausnummer des Objektes!");
document.forms[0].elements[0].focus();
return(false);}

if(plzobjekt==""){alert("Bitte &uuml;berpr&uuml;fen Sie die Postleitzahl des Objektes!");
document.forms[0].elements[0].focus();
return(false);}

if(ortobjekt==""){alert("Bitte &uuml;berpr&uuml;fen Sie den Ort des Objektes!");
document.forms[0].elements[0].focus();
return(false);}

if(nachnamebesteller==""){alert("Bitte &uuml;berpr&uuml;fen Sie Ihren Namen!");
document.forms[0].elements[0].focus();
return(false);}

if(vornamenbesteller==""){alert("Bitte &uuml;berpr&uuml;fen Sie Ihren Vornamen!");
document.forms[0].elements[0].focus();
return(false);}

if(strassebesteller==""){alert("Bitte &uuml;berpr&uuml;fen Sie Ihre Str&szlig;e!");
document.forms[0].elements[0].focus();
return(false);}

if(hausnummerbesteller==""){alert("Bitte &uuml;berpr&uuml;fen Sie Ihre Hausnummer!");
document.forms[0].elements[0].focus();
return(false);}

if(plzbesteller==""){alert("Bitte &uuml;berpr&uuml;fen Sie Ihre Postleitzahl!");
document.forms[0].elements[0].focus();
return(false);}

if(ortbesteller==""){alert("Bitte &uuml;berpr&uuml;fen Sie Ihren Ort!");
document.forms[0].elements[0].focus();
return(false);}

if(telefonbesteller==""){alert("Bitte &uuml;berpr&uuml;fen Sie Ihre Telefonnummer!");
document.forms[0].elements[0].focus();
return(false);}

if (mail!=""){
if ((mailat==-1)||(maildot==-1))
{alert("Bitte &uuml;berpr&uuml;fen Sie Ihre E-Mail-Adresse!");
document.forms[0].elements[1].focus();
return(false);}}

if(zustimmen==""){alert("Bitte best&auml;tigen Sie die AGB!");
document.forms[0].elements[0].focus();
return(false);}

</script>




    -->
  </style>
</head>
<body>


      <form action="expertspeedy.php" method="get" name="kontakt" enctype="text/plain" onSubmit="return plausibel();">
	  <table cellspacing="0" cellpadding="2" border="0">
      <tr>
          <td class="table_col_title">Produkt*</td>
          <td class="table_cell"><select name="produkt" style="font-size:15px">
		  <option>expert-speedy</option>
		  <option>expert-speedy Xtra</option></td></select>
      </tr>
      <tr>
          <th colspan="2" align="left" height="35" font-weight="bold" class="table_col_title">Anschrift des Objektes</th>
          <td></td>
      </tr>
      <tr>
          <td class="table_col_title">Stra&szlig;e*</td>
          <td class="table_cell"><input type="text" name="strasseobjekt" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
      <tr>
          <td class="table_col_title">Hausnummer*</td>
          <td class="table_cell"><input type="text" name="hausnummerobjekt" style="font-size:15px"; size="15" maxlength="10"></td>
      </tr>
       <tr>
          <td class="table_col_title">PLZ*</td>
          <td class="table_cell"><input type="text" name="plzobjekt" style="font-size:15px"; size="15" maxlength="5"></td>
      </tr>
      <tr>
          <td class="table_col_title">Ort*</td>
          <td class="table_cell"><input type="text" name="ortobjekt" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
      <tr>
          <td class="table_col_title">Land</td>
          <td class="table_cell"><select name="landobjekt" style="font-size:15px">
		  <option>Deutschland</option></select></td>
      </tr>
	  <tr>
          <td class="table_col_title">Objektart*</td>
          <td class="table_cell"><select name="objektart" style="font-size:15px">
		  <option>Wohnhaus</option>
		  <option>Mehrfamilienhaus</option>
		  <option>Einfamilienhaus</option>
	      <option>B&uuml;rohaus</option>
		  <option>Gesch&auml;ftshaus</option>
		  <option>Garage</option></select></td>
      </tr>
	  <tr>
          <td class="table_col_title">Hinweis</td>
          <td class="table_cell"><textarea name="hinweis" cols="33" style="font-size:15px"; rows="6"></textarea></td>
      </tr>
      <tr>
          <th colspan="2" align="left" height="35" font-weight="bold" class="table_col_title">Anschrift des Bestellers</th>
      </tr>
	  <tr>
          <td class="table_col_title">Anrede*</td>
          <td class="table_cell"><select name="anrede" style="font-size:15px">
		  <option>Frau</option>
		  <option>Herr</option></select></td>
      </tr>
	  <tr>
          <td class="table_col_title">Name*</td>
          <td class="table_cell"><input type="text" name="nachname" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
	  <tr>
          <td class="table_col_title">Vorname*</td>
          <td class="table_cell"><input type="text" name="vorname" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
	  <tr>
          <td class="table_col_title">Firma</td>
          <td class="table_cell"><input type="text" name="firma" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
	  <tr>
          <td class="table_col_title">Abteilung</td>
          <td class="table_cell"><input type="text" name="abteilung" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
	  <tr>
          <td class="table_col_title">Stra&szlig;e*</td>
          <td class="table_cell"><input type="text" name="strassebesteller" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
	   <tr>
          <td class="table_col_title">Hausnummer*</td>
          <td class="table_cell"><input type="text" name="hausnummerbesteller" style="font-size:15px"; size="15" maxlength="10"></td>
      </tr>
	   <tr>
          <td class="table_col_title">PLZ*</td>
          <td class="table_cell"><input type="text" name="plzbesteller" style="font-size:15px"; size="15" maxlength="5s"></td>
      </tr>
	  <tr>
          <td class="table_col_title">Ort*</td>
          <td class="table_cell"><input type="text" name="ortbesteller" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
	  <tr>
          <td class="table_col_title">Land</td>
          <td class="table_cell"><select name="landbesteller" style="font-size:15px">
		  <option>Deutschland</option></select></td>
	  </tr>
	  <tr>
          <td class="table_col_title">Telefon*</td>
          <td class="table_cell"><input type="text" name="telefon" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
	   <tr>
          <td class="table_col_title">Telefax</td>
          <td class="table_cell"><input type="text" name="telefax" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
	  <tr>
          <td class="table_col_title">E-Mail*</td>
          <td class="table_cell"><input type="text" name="mail" style="font-size:15px"; size="35" maxlength="80"></td>
      </tr>
	  <tr>
          <td class="table_col_title">AGB* <a target="popup" onclick="window.open
  ('', 'popup', 'width=600,height=600,scrollbars=no, toolbar=no,status=no,
  resizable=yes,menubar=no,location=no,directories=no,top=10,left=10')
  "href="agb.php5"><i>lesen</i></a></td>
          <td class="table_cell"><input type="checkbox" name="zustimmen">Ich habe die AGB gelesen und stimme zu</td>
      </tr>
      <tr>
          <td class="table_col_title">&nbsp;</td>
          <td class="table_cell"><input type="submit" value="Absenden"></td>
      </tr>
</table>
 </form>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Überprüfung eines Formulars

    Beat Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Deine JS-Fehlerkonsole hätte da was zu sagen.
    Wie lautet die Nachricht?

    PS: übles Formular Markup.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Überprüfung eines Formulars

    Maxx Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Lilli,

    function check(forms){

    im onsubmit des Formulares rufst du "plausibel()" auf? Da passt was nicht zusammen.

    name=document.forms[0].elements[0].value;
    email=document.forms[0].elements[1].value;

    document.forms[0].elements[0] (also das erste Element des Formulares) ist die Auswahlbox Produkt, document.forms[0].elements[1] die Strasse.

    if(strasseobjekt==""){alert

    wo soll "strasseobjekt" herkommen? Schau mal hier wie der Zugriff auf die Elemente eines Formulares funktioniert: http://de.selfhtml.org/javascript/objekte/elements.htm#allgemeines

    <form action="expertspeedy.php" method="get" name="kontakt"
               enctype="text/plain" onSubmit="return plausibel();">

    Siehe Oben. Javascript ist casesensitiv. Es heißt onsubmit();

    Verwende zum Testen nicht den Internetexplorer. Die Hinweise zu fehlerhaftem javascript sind teilweise etwas dürftig. Benutze den Firefox; unter Extras, Fehlerkonsole gibts ein super Hilfsmittel um Fehler im javascriptcode zu finden.

    Viele Grüße,

    Jochen

    --
    Kritzeln statt texten: Scribbleboard
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Überprüfung eines Formulars

      Beat Homepage des Autors
      – Informationen zu den Bewertungsregeln

      <form action="expertspeedy.php" method="get" name="kontakt"
                  enctype="text/plain" onSubmit="return plausibel();">

      Siehe Oben. Javascript ist casesensitiv. Es heißt onsubmit();

      Der beanstandete Käse ist HTML und in Unkenntnis des Doctypes nicht als unkorrekt zu bemängeln.

      Die Error-Message bezieht sich darauf, das eine Funktion plausibel() gar nie deklariert wurde.

      mfg Beat

      --
      ><o(((°>           ><o(((°>
         <°)))o><                     ><o(((°>o
      Der Valigator leibt diese Fische
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  3. Überprüfung eines Formulars

    EKKi
    – Informationen zu den Bewertungsregeln

    Mahlzeit LilliLy,

    ich habe ein Formular erstellt das ich mit JavaScript überprüfen lassen möchte.

    Warum? Diese "Überprüfung" ist jederzeit durch den Benutzer abschalt- und damit umgehbar. Eine wirkliche Prüfung kann NUR auf dem Server erfolgen - clientseitige Prüfungen (durch Javascript) sollten höchstens eingesetzt werden, um den Bedienkomfort zu erhöhen (durch zeitnahes Feedback an den Benutzer).

    Nur leider funktioniert da gar nix.

    "Funktioniert nicht" funktioniert nicht.

    Es wird nicht überprüft und das Formular wird direkt an die Mail-Adresse geschickt.

    Aha, also doch noch eine Problembeschreibung. Wenn das Formular abgeschickt wird, wird Deine Funktion "plausibel()" wohl in irgendeiner Form true zurückgeben ... jedenfalls nicht false. Dazu später.

    selbst wenn ich das Formular ausfülle steht in der ankommenden Mail nichts drin.

    Das ist dann wohl ein serverseitiges Problem bei der Formularverarbeitung.

    Wenn ich die Seite öffne wird sie ebenfalls verschickt.

    Das wohl auch. Anscheinend überprüfst Du in Deinem serverseitigen Skript "expertspeedy.php" nicht wirklich, welche Werte übergeben werden.

    Bitte helft mir, da es nun auch sehr eilig wird und ich nicht mehr weiß was ich machen soll.

    <abschweif>Warum kommen die Fragesteller eigentlich immer erst dann hier ins Forum, wenn die Deadline kurz bevor steht, anstatt sich rechtzeitig mit ihren Problem zu beschäftigen?</abschweif>

    <Script language="JavaScript">

    1. empfiehlt es sich, sämtliche Element-Tags und Attribute XHTML-konform durchgehend klein zu schreiben und

    2. fehlt das zwingend erforderliche http://de.selfhtml.org/html/referenz/attribute.htm#script@title=type-Attribut.

    // Formular-Checker
    function check(forms){

    Welchen Sinn hat ein Funktionsparameter, wenn Du ihn nie mit Werten füllst (beim Aufruf der Funktion) und ihn innerhalb der Funktion auch nie verwendest?

    name=document.forms[0].elements[0].value;
    email=document.forms[0].elements[1].value;

    Informiere Dich zum <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=Unterschied zwischen globalen und lokalen Variablen>.

    Außerdem: bist Du Dir ganz sicher, dass der Name IMMER im ersten Feld des ersten Formulars steht? Ich würde Dir <http://de.selfhtml.org/javascript/objekte/elements.htm@title=Schema 4> empfehlen - zusammen mit der Nutzung des o.a. Funktionsparameters in Kombination mit der Nutzung von http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=this beim Aufruf der Funktion.

    maildot=email.indexOf(".");

    Und was ist, wenn in der angegebenen Emailadresse mehrere Punkte existieren?

    if(strasseobjekt==""){alert("Bitte &uuml;berpr&uuml;fen Sie die Stra&szlig;e des Objektes!");

    Woher kommt die Variable namens "strasseobjekt"? Woher soll ihr Inhalt kommen?

    Es ist weiterhin IMHO nicht sinnvoll, hier HTML-Entities für Sonderzeichen zu verwenden - schließlich handelt es sich um Javascript, nicht HTML.

    return(false);}

    Da die Überprüfung SO eigentlich nicht funktionieren KANN, wird natürlich auch kein false zurückgegeben.

    </script>

    -->
      </style>

    Das ist so kein korrektes HTML. Hast Du schon den Validator bemüht?

    <form action="expertspeedy.php" method="get" name="kontakt" enctype="text/plain" onSubmit="return plausibel();">

    Zur generellen Kleinschreibung von Attributen s.o. Du solltest hier der Funktion "plausibel()" das aktuelle Formular per Parameter übergeben (Stichwort http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=this).

    <td class="table_col_title">Produkt*</td>
              <td class="table_cell"><select name="produkt" style="font-size:15px">

    Um zwischen "Kopfzellen" und normalen "Datenzellen" zu unterscheiden, bietet sich der Einsatz von <th> und <td> an. Außerdem solltest Du CSS-Angaben möglichste in zentrale Stylesheets auslagern.

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln