Formular zeigt nicht angegebenen Warntext an

Aktuelle Programmier- und Auszeichnungssprachen HTML / CSS / JavaScript
1

Halloooooo, :lol:

es stehen wahrscheinlich wieder offensichtliche Fehler auf dem Plan :).
Mein Formular soll bei einem fehlenden Eintrag, bei Buchstaben wo eigentlich Zahlen gebraucht werden und bei einer falsch endenden E-Mail-Adresse, per Text eine Mahnung ausgeben. Zwar gibt er sie auch aus, aber nicht den Text den ich im Javascript vorgegeben habe. Ich vermute es hat etwas mit dem Einbinden zu tun. Könntet ihr mir bitte helfen? :o

Das HTML5-Script sieht folgendermaßen aus:

<html lang="de">
<head>
		<meta charset="utf-8">
		<title> Formular </title>
		<meta name="Formular" content="Alle Linien ausfüllen um dich zu registrieren" >
		<meta name="Author" content="Nicole Netzbandt">
		<link rel ="stylesheet" type="text/css" href="CssLink.css">
		<script src="javascript2.js">countdown(2,'test');</script>
</head>

<body>
<output id="test"><script>countdown(2,'test');</script></output><br>

<href class ="body">





 	<div id="head">
		<h1>Formular<h1>
	</div><br>
		<div id="nat">
	<br><button type="button" id="löschen">Event löschen</button><br><br>
	<button type="button" id="update">Update Events</button><br><br>
   <button type="button" id="showAll">Alle Events</button>
   </div>
 	<div id="nav">
	<A HREF="Main.html">Start Seite</A><br>
	
			Benutzername:
			<input type= "text" name= "Suchleiste" size="20" maxlength="20" required><br>
			Passwort: <br>
			<input type= "text" name= "Suchleiste" size="20" maxlength="20" required>
			
			<button type="button" id="login">Log In</button>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp<br><A HREF="Formular.html">Anmeldung</A>
	<br>

	<from action="from_response.php" method="post">
	<from action="select.html">
	<select name="Kategorien" size="5">
			<option>Frühling</option>
			<option>Sommer</option>
			<option>Herbst</option>
			<option>Winter</option>
			</Select>
			</from>
			<br>
			Ort: <br>
			<input type="text" list="games">
		    <datalist id="games">
			<option value="Berlin">
			<option value="Brandenburg">
			<option value="Kölln">
			<option value="Sachsen">
			<option value="Dänemark">
			<option value="Candy Mountain">
			</datalist><br>
			Eventtyp: <br>
			<input type="text" list="eventtyp">
			<datalist id="eventtyp">
			<option value="Horror">
			<option value="Sport">
			<option value="Kostüm">
			<option value="Länder">
			<option value="Party">
			<option value="Nerd">
			</datalist>
			<br>Zeit: <br>
			<input type="text" list="zeit">
			<datalist id="zeit">
			<option value="8:00 - 10:00 Uhr">
			<option value="10:00 - 12:00 Uhr">
			<option value="12:00 - 14:00 Uhr">
			<option value="14:00 - 16:00 Uhr">
			<option value="16:00 - 18:00 Uhr">
			<option value="18:00 - 20:00 Uhr">
			</datalist>
			Eventname: <br>
			<input type="text" list="name">
			<datalist id="name">
			<option value="Zombie Walk">
			<option value="MMC">
			<option value="Jonglier Meisterschaften">
			<option value="Zirkus Halli Galli">
			<option value="We buttern das Brot mit Butter">
			<option value="Sonstige">
			</datalist>
			<br><A HREF="Tabelle1.html">Eventliste</A> 
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <button type="button" id="suche">Suchen</button>
			<br><br>
	</div>

<br>
<div class = "middle">
<form name ="Formular" action="http://de.selfhtml.org/cgi-bin/formview.pl" methode="post" onsubmit="return chkFormular()">
<pre>
 Bitte füllen Sie alle Felder mit Sternchen aus. 
 Vielen Dank!
 <br><br>
 Name*:<br><br>
 <input type= "text" name= "name" size="40" maxlength="40" required>&nbsp <href class = "rechts"> <img src="http://www.ggc.edu/sebin/d/i/NoPerson.png" height="250" width="220" border="5"><br><button type="button" id="suchen"> Bild wählen </button></href></href><br>
<br><br>
 Vorname*: <br><br>
 <input type= "text" name= "vorname" size="40" maxlength="40" required>
<br><br>
 Alter*:<br><br>
 <input type="text" list="Alter" required>
 <datalist id="Alter">
  <option value="16">
  <option value="17">
  <option value="18">
  <option value="19">
  <option value="20">
  <option value="21">
  <option value="22">
  <option value="23">
  <option value="24">
  <option value="24">
  <option value="25">
  <option value="26">
</datalist>
<br><br>
 Straße und Hausnummer*:<br><br>
 <input type= "text" name= "strasse" size="40" maxlength="40" required>&nbsp <input type= "text" name= "hausnummer" size="5" maxlength="5" required>
<br><br>
 Postleitzahl*:<br><br>
 <input type= "text" name= "plz" size="10" maxlength="10" required>
<br><br>
 Telefonnummer:<br><br>
 <input type= "text" name= "telnummer" size="40" maxlength="40">
<br><br>
 E-Mail-Adresse*:<br><br>
 <input type= "text" name= "mail" size="40" maxlength="40" required>
 <href class ="rechts"><input type="submit" value="Absenden"></href>
 </pre>
 </form>
 </div>
</body>
<footer>


<div id="footer">

</div>
</footer>
</html> ```

Und Hier das Javascript:

function chkFormular(){

if (document.Formular.name.value == " “) {
alert(“Bitte Ihren Namen eingeben!”);
document.Formular.name.focus();
return false;
}
if (document.Formular.vorname.value==”"){
alert(“Bitte Ihren Vornamen eingeben!”);
document.Formular.vorname.focus();
return false;
}
if(document.Formular.mail.value==""){
alert(“Bitte Ihre E-Mail eingeben!”);
document.Formular.mail.focus();
return false;
}
if(document.Formular.mail.value.indexOf("@gmx.de")== -1){
alert(“Ihre Internetadresse muss mit ‘@gmx.de’ enden!”);
document.Formular.mail.focus();
return false;
}
if(document.Formular.Alter.value==""){
alert(“Bitte Alter eingeben!”);
document.Formular.Alter.focus();
return false;
}
var chkZ = 1;
for (i = 0; i < document.Formular.Alter.value.length; ++i){
if (document.Formular.Alter.value.charAt(i) < “0” ||
document.Formular.Alter.value.charAt(i) > “9”)}
chkZ = -1;
if (chkZ == -1) {
alert(“Altersangabe keine Zahl!”);
document.Formular.Alter.focus();
return false;
}

if(document.Formular.strasse.value==""){
alert(“Bitte Straße eintragen!”);
document.Formular.strasse.focus();
return false;
}
if(document.Formular.hausnummer.value==""){
alert(“Bitte Hausnummer eintragen!”);
document.Formular.hausnummer.focus();
return false;
}
var chkX = 1;
for(i = 0; i < document.Formular.telnummer.lenght; i++){
if(document.Formular.telnummer.value.charAt(i) < “0” ||
document.Forumlar.telnummer.value.charAt(i) > “9”){
chkX = -1;
if(chkX == -1){
alert(“Telefonnummer muss aus Zahlen bestehen!”);
document.Forumlar.telnummer.focus();
return false;
}
if(document.Formular.plz.value==""){
alert(“Bitte Postleizahl eintragen!”);
document.Formular.plz.focus();
return false;
}
}
}
var chkX = 1;
for(i = 0; i < document.Formular.plz.lenght; i++){
if(document.Formular.plz.value.charAt(i) < “0” ||
document.Forumlar.plz.value.charAt(i) > “9”){
chkX = -1;
if(chkX == -1){
alert(“Postleizahl muss aus Zahlen bestehen!”);
document.Forumlar.plz.focus();
return false;
}
}
}
}

document.getElementById(“absenden”).onClick = chkFormular;

2

Welchen Text gibt er aus, und welchen sollte der ausgeben?

3

Ausgeben tut er “Bitte das Feld ausfüllen”, er sollte aber z.B “Bitte Namen eingeben.” schreiben.
Tut mir leid hätte ich vllt. noch hinschreiben sollen ^^°

4

Der Text “Bitte das Feld ausfüllen” kommt im geposteten Code nirgends vor. Aber irgendwo muss der ja herkommen. Sorry, etwas planlos geraten: Mal den Browsercache löschen? Vielleicht liegt da irgendwo noch eine alte “.js”-Datei, in der noch dieser alte Text stand?

EDIT: Ein weiteres detail: Ich würde vermuten, dass sowas wie
document.Formular.name.value == " "
eher
document.Formular.name.value == ""
lauten müßte (je nachdem, ob ein Leerzeichen ein gültiger Name sein soll, oder nicht ;-))

5

Alles klar danke :slight_smile: ich werde es später mal versuchen und gucken ob es geklappt hat!

6

Web Forms - Dive Into HTML5

Einen Großteil deines Javascript Codes benötigst du nicht.
Da du ja HTML5 verwenden willst, kannst du auch einfach die vorhandene HTML5 Funktion zur Überprüfung der Eingaben nutzen. Siehe dazu den obigen Link.
Für E-Mail und Telefonnummer gibt es entsprechende Input Types, welche du verwenden kannst.
Desweiteren kannst du mittels required die Eingabe eines Wertes erzwingen. (Nicht vergessen auf dem Server die Eingabe zu prüfen)

Für das Alter wäre der Input Type „number“ oder „range“ sinnvoll

Ein Beispiel findest du hier: Feldtypen für kontrollierte Eingaben - Webkompetenz

Noch eine (unnötige) Anmerkung: Einem Anwender einen minderwertigen E-Mail Dienst aufzuzwingen ist nicht die feine englische Art :wink:

Und valide ist deine HTML Datei auch nicht.
Hier mal einige offensichtliche Dinge:

  • Sehr viele Tags werden geöffnet, aber nicht geschlossen. Zum Beispiel

    Formular

    und so ziemlich alle inline Tags (
    )

  • nicht
  • Du machst verschiedene Formulare (teilweise verschachtelt) und schließt sie teilweise nie
  • footer Tags gehören in den Body Tag