Skripte(PHP,ASP,Perl...)

Validitätsprüfungen in Formularen mit JavaScript

Diskussionsgruppen
Betriebsysteme: Windows 7; WindowsVista; WindowsXP; Linux; BS-Sonstige
Software: Textverarbeitung; Tabellenkalkulation; Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; E-Mail/Outlook; Internet Browser; SW-Sonstige
Hardware: Mainboard/CPU/RAM; Grafikkarten; Peripherie; HW Sonstiges
Netzwerk: DSL; W-Lan; Telekommunikation; NW-Sonstiges
Programmierung: Skripte(PHP,ASP,Perl...); Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke

Frage

Hei ihr java gurus, ich bräucht mal hilfe. Ich habe ein Formular mit Pflichtfelder die ich mit <script language="JavaScript"> <!-- Form Checker function FormCheck() { if(document.Formular.Vorname.value == "") { alert("Du hast Deinen Vornamen vergessen!"); document.Formular.Vorname.focus(); return false; } if (document.Formular.AGB.checked==false) { alert("Sind Sie mit den Allgemeinen Geschäftsbedingungen einverstanden?"); document.Formular.agb.focus(); return false; } } //end form checker </script>. usw prüfe. ganz am Schluss gibt es noch eine Checkbox für die AGBS. das Absenden des Formulares soll nur möglich sein bei aktivierter Checkbox.´ Jetzt mein Problem, wenn der hacken gesetzt ist, ist alles okay. wenn nicht kommt auch ein Popup das der Haken für die AGB fehlt. auch okay Wenn dieses popup jetzt bestätigt wird, wird aber mein Formular auch ohne AGB check versendet :-( wie kann ich da wieder einen rücksprung zum Formular machen ? Also den event "submit" abrechen ?

Antwort 1 von Floooooo

Poste dann doch bitte mal die komplette Funktion - denn an deinem Teil sehe ich bis jetzt nichts falsches.
Wo bindest du die Methode ein? ich denke mal:

<form [...] onSubmit="FormCheck()">

Oder?
Also: Bitte noch etwas mehr Info. Achja: Verhält sich alles korrekt, wenn du a) alles richtig ausfüllst, b) z.B. der Name vergessen wird?

P.S.: Immer wieder: JAVA ist NICHT JavaScript ! (hat mit deinem Problem nix zu tun, aber man kann es den Leuten nicht lang genug einhämmern... :-)

Antwort 2 von gover

<html>
<head>
<title>Anmeldeformular</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="STYLE2.CSS" type="text/css">
</head>

<script language="JavaScript">
<!-- Set position

self.moveTo(400,10);

self.resizeTo(630,740);
//end set position
<!-- Form Checker
function FormCheck()
{
if(document.Formular.Vorname.value == "")
{
alert("Du hast Deinen Vornamen vergessen!");
document.Formular.Vorname.focus();
return false;
}
if(document.Formular.Nachname.value == "")
{
alert("Du hast Deinen Nachnamen vergessen!");
document.Formular.Nachname.focus();
return false;
}
if(document.Formular.Strasse.value == "")
{
alert("Hast Du keine Strasse ? ");
document.Formular.Strasse.focus();
return false;
}
if(document.Formular.PLZ.value == "")
{
alert("Die PLZ von deinem Wohnort fehlt!");
document.Formular.PLZ.focus();
return false;
}
if(document.Formular.Ort.value == "")
{
alert("Wo Du wohne? Hä!");
document.Formular.Ort.focus();
return false;
}
if(document.Formular.Telefon.value == "")
{
alert("Hei, gibst du mir deine Nummer?");
document.Formular.Telefon.focus();
return false;
}
if(document.Formular.Geburtstag.value == "")
{
alert("Wann bist du geboren?");
document.Formular.Geburtstag.focus();
return false;
}
if(document.Formular.Kontonummer.value == "")
{
alert("Bitte Ihre Kontonummer angeben!");
document.Formular.Kontonummer.focus();
return false;
}
if(document.Formular.Bankleitzahl.value == "")
{
alert("Bitte Ihre BLZ angeben!");
document.Formular.Bankleitzahl.focus();
return false;
}
if(document.Formular.Bank.value == "")
{
alert("Bitte Ihre Bank angeben!");
document.Formular.Bank.focus();
return false;
}
if(document.Formular.Kontoinhaber.value == "")
{
alert("Bitte den Kontoinhaber angeben!");
document.Formular.Kontoinhaber.focus();
return false;
}
if (document.Formular.AGB.checked==false)
{
alert("Sind Sie mit den Allgemeinen Geschäftsbedingungen einverstanden?");
document.Formular.agb.focus();
return false;
}
}
//end form checker
</script>

<body bgcolor="#FFFFFF" text="#000000">

<H1 align="left">Anmeldeformular (online)</H1>
<FORM name="Formular" class=body accept-charset=UTF-8
action=formmailer.php method=post onSubmit="return FormCheck()">
<DIV class=fieldframe>

[...]

<TR>
<TD height="61" valign="top">
<DIV class=field>
<TABLE cellSpacing=0 cellPadding=2 width="100%">
<TBODY>
<TR>
<hr>
<TD width="500" height="32" nowrap>
<input type="checkbox" name="AGB" value="JA">
<b><font size="-2">Ich erkenne die <a href="agb.htm" target="blank">allgemeinen Reisebedingungen (AGB)</a> für mich verbindlich an und erkläre ausdrücklich in Kenntnis der AGB zu sein</font></b><font color="#FF0000" size="-2"><b>*</b></font></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<DIV class=buttonframe style="HEIGHT: 23px">
<INPUT class=button style="FLOAT: left" type=submit value=Abschicken name=ok>
<INPUT class=button style="FLOAT: left" type=reset value=Löschen name=löschen onClick="return confirm('Sind Sie sicher? Das sie Ihre Eingaben löschen möchten!')">
<INPUT class=button style="FLOAT: right" type=reset value=Abbrechen name=abbrechen onClick="javascript:window.close()"></DIV></FORM>

ZUSATZINFO:

Wenn ich alles korrekt ausgefüllt habe wird das Formular gesendet. Wenn ich zb. den Namen vergessen habe kommt eine Meldung. klicke ich dann auf okay springt der Courser direkt in das Feld und ich kann den zb. Namen angeben.

Nur wenn ich die checkbox für die AGB vergessen habe komme ich nicht mehr zurück ins Fomular.

das komplette Coding könnt ihr euch anschauen unter

http://www.skiclub-bissingen.de/Anmeldeformular_ausfahrt.htm

Danke für Eure Hilfe

Antwort 3 von semi

Schau Dir das fogende Beispiel an.
eingabe.html


<html>
<head>
<script type="text/javascript">
var requiredFields = Array(
  "vorname",
  "nachname",
  "agb"
);
var messages = Array(
  "Bitte geben Sie Ihren Vornamen ein.",
  "Bitte geben Sie Ihren Nachnamen ein",
  "Sie müssen sich mit den AGB's einverstanden erklären."
);
var requiredFieldsColor = '#DAE9FF';

function validate(form)
{
  for(var i=0; i<requiredFields.length; i++)
  {
    if(form.elements[requiredFields[i]].value.match(/^\s*$/))
    {
      alert(messages);
      form.elements[requiredFields[i]].value="";
      form.elements[requiredFields[i]].focus();
      return false;
    }
  }
  return true;
}

function init(form)
{
  for(var i=0; i<requiredFields.length; i++)
    form.elements[requiredFields[i]].style.backgroundColor
      =requiredFieldsColor;
}
</script>
</head>
<body onLoad="init(document.forms[0])">

<form action="ausgabe.html" onSubmit="return validate(this);">
<pre>
Vorname  <input name="vorname">
Nachname <input name="nachname">
EMail    <input name="email"><br>
<input name="agb" type=checkbox> Ich bin mit den AGB's einverstanden.<br>
<input type=submit value="Abschicken">
</pre>
</form>
</body>
</html>

ausgabe.html

<html><head>
<script type="text/javascript">
query = location.search.substring(1,location.search.length).split("&");
for(var i=0; i<query.length; i++) {
	nv = query.split("=");
	document.write(nv[0] + "=" + nv[1] + "<br>");
}
</script>
</head>
<body></body></html>

Du könntest auch pro Feld(typ) eine Funktion schreiben, die eine Prüfung der Inhalte vornimmt.
z.B. Zahlenbereiche, Gültige Zeichen etc.

Mit eval("funktionsname(parameter)"); läßt sich das dann auch verallgemeinert aufrufen.
(noch ein Array mit Funktionsnamen der Prüffunktionen)

Der Benutzer schaltet Javascript aus und der Aufwand war umsonst :)
Serverseitig muß alles sowieso erneut geprüft werden.

Gruß,
Michael

Antwort 4 von semi

Ups, nur Opera funktioniert damit korrekt.
Ersetze die Funktion validate durch die hier.

function validate(form)
{
  for(var i=0; i<requiredFields.length; i++)
  {
    if(form.elements[requiredFields[i]].type!='checkbox')
    {
      if(form.elements[requiredFields[i]].value.match(/^\s*$/))
      {
        alert(messages);
        form.elements[requiredFields[i]].value="";
        form.elements[requiredFields[i]].focus();
        return false;
      }
    }
    else
    {
      if(!form.elements[requiredFields[i]].checked)
      {
        alert(messages);
        return false;
      }
    }
  }
  return true;
}

Jetzt aber :-)

Gruß,
Michael

Antwort 5 von gover

Danke ! So geht es auch :-)

Aber was denkst du ist bei meiner Lösung Falsch.
ich habe mal den Button zum senden durch ein jpeg ersetzt dann geht das.. es liegt also an der Methode "onSubmit" oder ?

Vielleicht kann mir das noch einer beantworten, viele Grüsse
Thomas

Antwort 6 von Floooooo

Das ist meines Wissens ein kleines Problem mit dem IE, der verhält sich da nicht immer korrekt; es kommt u.a. daher, dass der IE unterscheidet, ob der submit von einem HTML-Element (submit-Button) oder durch JavaScript ausgelöst wurde.... passiert öfter....

Aber, wie semi schon sagte: Auf JavaScript kannst du dich sowieso nicht verlassen - wenn du sowieso php verwendest wäre es schöner, bei fehlerhaften Eingaben dem User das Formular nochmal zurückzuliefern, und z.B. die Stellen zu markieren, an denen etwas falsch ist.

Ach ja: [SoftwareEngineering]onSubmit ist keine Methode, sondern ein Event-Handler[/SoftwareEngineering]

Antwort 7 von gover

ja sorry, event-handler nicht Methode..

Viele Dank für eure Hilfe ..

Grüße
Thomas

Antwort 8 von semi

So sieht man den Unterschied


<html>
<head>
<script type="text/javascript">
function validate(form)
{
  alert(document.formular.agb.checked);
  return (document.formular.agb.checked);
}
</script>
</head>
<body>

<form name="formular" action="ausgabe.html" onSubmit="return validate(this);">
<input name="agb" type=checkbox> BlaBla?<br>
<!-- OK -->
<input type=submit value="Abschicken">
<!-- Kein event. Nix prüfen :) -->
<input 
  type=button 
  onClick="Javascript:document.formular.submit();" 
  value="Abschicken (1)"
>
<!-- Das hier läuft -->
<input 
  type=button 
  onClick="Javascript:validate(document.formular) && document.formular.submit();"
  value="Abschicken (2)"
>
</form>
</body>
</html>

Gruß,
Michael