[HTML|JS] Unausgefülltes Formular nicht abschicken

M

Mr. Snoot

Gast
Ich hoff die Datenbank hat meinen Thread gefressen, nicht dass ich den hier doppelt erstell :)

Also,

ich hab ein Formular, dass mittels JS auf richtige Eingabe überprüft wird; d.h. es soll nur abgeschickt werden, wenn alle Felder ausgefüllt/richtig ausgefüllt (z.B. @-Zeichen bei Emailadresse) sind. Bisher klappt's zumindest soweit, dass eine Meldung erscheint, dass irgendein Feld eben nicht oder falsch ausgefüllt wurde.

Allerdings wird das Formular nach Wegklicken der Meldung trotzdem abgeschickt - warum!?

Hier das Formular (der Übersicht halber ohne die Tabellenstruktur drumherum)
HTML:
<form name="form" method="POST" action="mail.php" enctype="text/plain" onSubmit="return validate_form()">
<input type="text" name="Name" class="sform" tabindex="1">
<textarea name="Mitteilung" class="sform" tabindex="3" style="height:100; width:200px"></textarea>
<input type="text" name="eMail" class="sform" tabindex="2">
<input type="submit" value="Eintragen" name="submit" class="sbutton">
</form>
Und hier das Javascript
HTML:
<script language="JavaScript">
<!--
function validate_form() {
  validity = true; // assume valid
  if (!check_empty(document.form.Name.value))
        { validity = false; alert('Bitte geben Sie ihren Namen ein.'); }
  if (!check_email(document.form.eMail.value))
        { validity = false; alert('Bitte geben Sie eine gültige Email-Adresse ein.'); }
  if (!check_empty(document.form.Mitteilung.value))
        { validity = false; alert('Bitte geben Sie eine Nachricht ein.'); }
  if (validity)
        alert ("Alle benötigten Informationen wurden geprüft. "
                + "Die eingaben wurden als richtig erkannt "
                + "Mail Delivery Sub-System.");
  return validity;
}

function check_empty(text) {
  return (text.length > 0); // gibt false zurück wenn leer
}

function check_email(address) {
  if ((address == "")
    || (address.indexOf ('@') == -1)
    || (address.indexOf ('.') == -1))
      return false;
  return true;
}

// -->
</script>
 
Zuletzt bearbeitet:
Ich überprüfe alles immer mittels PHP und speichere die Eingaben in Sessionvariablen, die in die Eingabefelder geschrieben werden, ist sicherer, falls jemand JavaScript deaktiviert hat. Du kannst dann auch mittels PHP-Funktionen die E-Mail auf Richtigkeit überprüfen.

Mmmhhh, eigentlich sollte es funktionieren. Probier mal folgendes:
onsubmit="if(!validity_form())return false"

Und ich würde else vor die weiteren If-Verzweigungen schreiben, sonst bekommt man unter Umständen alle Fehlermeldungen und das kann dann schon stressen. Und ich würde noch z.B. document.form.name.focus(); nach dem alert hinzufügen, dann springt er direkt dorthin, wo die Eingabe fehlt oder nicht korrekt ist. Ach ja, JavaScript ist im Gegensatz zu PHP nicht Case Sensitive.

Code:
function validate_form()
{
 if (!check_empty(document.form.name.value))
 {
  alert('Bitte geben Sie ihren Namen ein.');
  document.form.name.focus();
 }
 else if (!check_email(document.form.email.value))
 {
  alert('Bitte geben Sie eine gültige Email-Adresse ein.');
  document.form.email.focus();
 }
 else if (!check_empty(document.form.mitteilung.value))
 {
  alert('Bitte geben Sie eine Nachricht ein.');
  document.form.mitteilung.focus();
 }
 else
  return confirm("Alle Eingaben sind korrekt. Möchten Sie die Daten abschicken?");
 return false;
}
 
Zuletzt bearbeitet:
cR@zY.EnGi.GeR schrieb:
[..] und speichere die Eingaben in Sessionvariablen, die in die Eingabefelder geschrieben werden [..]
Muss ich das in meinem Bsp. auch? Wenn ich den von dor geposteten Code verwende kommt überhaupt kein Fehler und das Formular wird abgeschickt.
 
Gauder schrieb:
Muss ich das in meinem Bsp. auch?
Nur, wenn du die Eingaben mittels PHP überprüfst, denn dann wird ja die Seite neu geladen und dann wären alle Eingaben weg, deshalb muss man die Eingaben in Sessionvariablen speichern und kann dann den Inhalt der Variablen in die Eingabefelder schreiben (Sessions müssen in der php.ini aktiviert sein).

So z.B.:
<?
if (!isset($name))
$_SESSION["name"];
?>
...
<input type="text" name="name" class="sform" tabindex="1" value="<? echo $name ?>">


Aber probier mal das hier:

Code:
<form name="form" method="post" action="mail.php" enctype="text/plain" onSubmit="return validate_form()">
<input type="text" name="name" class="sform" tabindex="1">
<textarea name="mitteilung" class="sform" tabindex="3" style="height:100; width:200px"></textarea>
<input type="text" name="email" class="sform" tabindex="2">
<input type="submit" value="Eintragen" name="submit" class="sbutton">

<script type="text/JavaScript">
function validate_form()
{
 if (document.form.name.value=="")
 {
  alert('Bitte geben Sie ihren Namen ein.');
  document.form.name.focus();
 }
 else if (document.form.mitteilung.value=="")
 {
  alert('Bitte geben Sie eine Nachricht ein.');
  document.form.mitteilung.focus();
 }
 else if (!check_email(document.form.email.value))
 {
  alert('Bitte geben Sie eine gültige Email-Adresse ein.');
  document.form.email.focus();
 }
 else
  return confirm("Alle Eingaben sind korrekt. Möchten Sie die Daten abschicken?");
 return false;
}

function check_email(address)
{
 if (address=="" || address.indexOf ('@')==-1 || address.indexOf ('.')==-1)
  return false;
 else
  return true;
}
</script>
 
Zuletzt bearbeitet:
Gauder schrieb:
Da tut sich auch gar nichts (abgeschickt wird's immer) :(
Bei mir funktioniert das einwandfrei. Echt strange.

Mit welchem Browser hast dus getestet?
 
Zuletzt bearbeitet:
cR@zY.EnGi.GeR schrieb:
Bei mir funktioniert das einwandfrei. Echt strange.
Welches, PHP oder JS?
Mit welchem Browser hast dus getestet?
IE6. Was hast du bei dem JS ggü. meinem obigen geändert? Denn mein JS bringt zumindest noch die Meldung, dass was fehlt.
cR@zY.EnGi.GeR schrieb:
Ach ja, JavaScript ist im Gegensatz zu PHP nicht Case Sensitive.
Scheinbar doch :)

Bei deiner JS-Variante müssen die Namen der Felder exakt so geschrieben werden, wie im Formular, dann klappts.

Kann ich da noch irgendwie die abschließende Bestätigung wegmachen, ob man die Daten wirklich abschicken will?
 
Zuletzt bearbeitet:
Gauder schrieb:
Zitat:
Original geschrieben von cR@zY.EnGi.GeR
Bei mir funktioniert das einwandfrei. Echt strange.

Welches, PHP oder JS?
JS.
Gauder schrieb:
Zitat:
Mit welchem Browser hast dus getestet?

IE6.
Ich auch.
Gauder schrieb:
Was hast du bei dem JS ggü. meinem obigen geändert? Denn mein JS bringt zumindest noch die Meldung, dass was fehlt.
Das wirst du merken, wenns funtzt. :)
Es wird eben immer nur eine Fehlermeldung gebracht und danach springt der Cursor in das jeweilige Eingabefeld.
Gauder schrieb:
Zitat:
Original geschrieben von cR@zY.EnGi.GeR
Ach ja, JavaScript ist im Gegensatz zu PHP nicht Case Sensitive.

Scheinbar doch.

Bei deiner JS-Variante müssen die Namen der Felder exakt so geschrieben werden, wie im Formular, dann klappts.
Sorry, die Namen gehören ja zu HTML, aber ob man z.B. var text, oder var tExT schreibt, ist egal.
Habs ja in meinem vorhergehenden Post überall klein geschrieben. :)
Gauder schrieb:
Kann ich da noch irgendwie die abschließende Bestätigung wegmachen, ob man die Daten wirklich abschicken will?
Klar. Würde ich aber nicht machen. Ist ja so ähnlich wie beim Löschen einer Datei, da wird man ja auch immer gefragt, ob man die Datei(en) wirklich entgültig löschen möchte oder nicht, sonst hat man die Datei aus Versehen gelöscht. Bei dir hat man die Daten dann eventuell aus Versehen abgesendet.

Falls du das nicht möchtest, kannst du ja folgendes schreiben:
Anstatt
Code:
 else
  return confirm("Alle Eingaben sind korrekt. Möchten Sie die Daten abschicken?");
das hier:
Code:
 else
 {
  alert("Alle Eingaben sind korrekt.");
  return true;
 }
Oder das:
Code:
 else
  return true;
 
cR@zY.EnGi.GeR schrieb:
Klar. Würde ich aber nicht machen. Ist ja so ähnlich wie beim Löschen einer Datei, da wird man ja auch immer gefragt, ob man die Datei(en) wirklich entgültig löschen möchte oder nicht, sonst hat man die Datei aus Versehen gelöscht. Bei dir hat man die Daten dann eventuell aus Versehen abgesendet.
Na jut, dann lass ich das erstmal drin - allerdings hab ich jetzt plötzlich das Problem, dass keine Daten die man ins Formular eintippt übertragen werden. Die Mail kommt also an (und auch alle Hinweismeldungen tauchen auf wenn man was leer lässt), aber sie ist leer :heul:

Das ist aber nur der Fall, wenn ich diese JS Überprüfung drin habe; also

<form name="form" method="POST" action="mail.php" enctype="text/plain" onSubmit="return validate_form()">

Irgendne Idee was da wieder kaputt ist?
 
Tja keine Ahnung, eigentlich müsstes funtzen.
Schreib mal folgendes in die mail.php:
Code:
print_r($Name);
Falls bei dir "Name" anders geschrieben ist, schreib es so wie es im Input-Tag steht.
Dann gibt er dir den Inhalt der Variablen $Name aus, also das, was du eingegeben und an mail.php geschickt hast. Wenn da nix steht, hat er nichts an mail.php geschickt,warum auch immer. :)
 
Zurück
Oben