nicht angemeldet
Problem bei der Formularprüfung
Hallo, ich möchte mit einer Javascriptfunktion ein Formular prüfen, das drei Radiobutton (sie gehören zusammen und haben alle den Namen "radio" aber unterschiedliche value) hat. Nur wenn der dritte Radiobutton mit dem value "jein" ausgewählt wird, soll auch etwas in das Formularfeld Datum eingetragen werden. Soweit funktioniert auch die Formularprüfung. Nun wollte ich bei dem Datumsfeld allerdings nicht nur prüfen, ob überhaupt was drinsteht, sondern auch die Anzahl der Zeichen und ob es sich nur um Ziffern handelt. Jetzt beginnt das Problem, wenn man den 1. oder 2. Radiobutton anklickt, fragt er zwar richtigerweise nicht, ob eine Eingabe ins Datumfeld erfolgt ist, aber die 2. Datumsabfrage nach der Anzahl der eingegebenen Buchstaben erscheint. Die soll doch nur abgefragt werden, wenn Radiobutton 3 angeklickt wird. Habe schon alles mögliche ausprobiert und finde den Fehler nicht. Hat jemeand eine Idee. Zum besseren Verständnis hier das Script:
<html>
<head>
<title>Form-Test</title>
<script language="JavaScript">
<!--
if(document.layers)
{ document.write("<link rel='stylesheet' type='text/css' href='../style/formate_ns4.css'>"); }
else
{ document.write("<link rel='stylesheet' type='text/css' href='../style/formate.css'>"); }
//-->
</script>
<script Language="JavaScript"><!--
function Validator()
{
j=false;
for (i=0; i<document.forms[0].radio.length; i++)
if (document.forms[0].radio[i].checked)
{
j=true;
break;
}
if(!j)
{ alert(" Bitte geben Sie einen Wert bei "Radio" an.");
return (false);
}
if (document.forms[0].radio[2].checked && document.test.datum.value == "")
{
alert(" Bitte geben Sie einen Wert bei "Datum" ein.");
document.test.datum.focus();
return (false);
}
if (document.test.datum.value.length < 10)
{
alert("Geben Sie mindestens 10 Zeichen in das Feld "Datum" ein.");
document.test.datum.focus();
return (false);
}
if (document.test.datum.value.length > 10)
{
alert("Geben Sie höchstens 10 Zeichen in das Feld "Datum" ein.");
document.test.datum.focus();
return (false);
}
var checkOK = "0123456789-.";
var checkStr = document.test.datum.value;
var allValid = true;
var decPoints = 0;
var allNum = "";
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
if (ch == checkOK.charAt(j))
break;
if (j == checkOK.length)
{
allValid = false;
break;
}
allNum += ch;
}
if (!allValid)
{
alert("Geben Sie nur Ziffern und Punkte in das Feld "Datum" ein.");
document.test.datum.focus();
return (false);
}
if (document.forms[0].radio[2].checked && document.test.wort.value == "")
{
alert(" Bitte geben Sie einen Wort bei "Wort" ein.");
document.test.wort.focus();
return (false);
}
return (true);
}
//--></script>
</head>
<body bgcolor="#ffffff" text="#000000" link="#21428c" alink="#21428c" vlink="#21428c">
<p>
<form method="post" action="weiter.php" name="test" onsubmit="return Validator()">
<table border="1" cellpadding="6" cellspacing="0" width="60%" bgcolor="White">
<tr>
<td> </td>
<td align="left" valign="top" height="30"><strong>Test</strong></td>
</tr>
<tr>
<td align="center" valign="top" width="10%">
<input type="radio" name="radio" value="nein"></td>
<td valign="middle" width="90%">nein</td>
</tr>
<tr>
<td align="center" valign="top">
<input type="radio" name="radio" value="ja"></td>
<td valign="middle" width="220">ja</td>
</tr>
<tr>
<td align="center" valign="top"><input type="radio" name="radio" value="jein"></td>
<td valign="middle">jein
<table border="0" cellpadding="4" cellspacing="0" width="80%">
<tr>
<td width="35%">Datum</td>
<td width="65%"><input type="text" name="datum" size="10" maxlength="10"> TT.MM.JJJJ</td>
</tr>
<tr>
<td>Wort</td>
<td><input type="text" name="wort" size="25" maxlength="30"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td height="62" align="right"><input type="submit" value="weiter" name="submit" alt="Ihre Anfrage" title="Ihre Anfrage" style="background-color:transparent; color:#336699; width:100px; font-size:9pt; font-weight:bold;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
-
Hallo,
Der Grund dafür, dass er die Länge immer testet, auch wenn kein Datum drin steht, ist relativ einfach. Stattif (document.forms[0].radio[2].checked && document.test.datum.value == "")
{
alert(" Bitte geben Sie einen Wert bei "Datum" ein.");
document.test.datum.focus();
return (false);
}if (document.test.datum.value.length < 10)
{
alert("Geben Sie mindestens 10 Zeichen in das Feld "Datum" ein.");
document.test.datum.focus();
return (false);
}if (document.test.datum.value.length > 10)
{
alert("Geben Sie höchstens 10 Zeichen in das Feld "Datum" ein.");
document.test.datum.focus();
return (false);
}müsste es heißen
if (document.forms[0].radio[2].checked && document.test.datum.value == "")
{
alert(" Bitte geben Sie einen Wert bei "Datum" ein.");
document.test.datum.focus();
return (false);
}else if (document.test.datum.value.length < 10)
{
alert("Geben Sie mindestens 10 Zeichen in das Feld "Datum" ein.");
document.test.datum.focus();
return (false);
}else if (document.test.datum.value.length > 10)
{
alert("Geben Sie höchstens 10 Zeichen in das Feld "Datum" ein.");
document.test.datum.focus();
return (false);
}denn sonst arbeitet er alles nach dem ersten if-Block einfach weiter ab, egal was da raus kommt. Nebenbei: Die beiden unteren Blocks kannst du auch einfach durch
else if (document.test.datum.value.length != 10)
{
alert("Geben sie genau 10 Zeichen in das Feld "Datum" ein.");
document.test.datum.focus();
return (false);
}ersetzen.
-
Hallo Cochrane,
vielen Dank für die Idee mit der If-Abfrage, habe sie noch ein wenig umgebaut (verschachtelt) und nun passt es und das :"Geben sie genau 10 Zeichen in das Feld "Datum" ein." ist natürlich besser als 2 Abfragen.
Viele Grüße Catdog
-