- Registriert
- 01.05.06
- Beiträge
- 5.721
hallo,
ich hab ein kleines formular gemacht und das wird mit javascript überprüft. nun würd ich gerne machen, dass das feld, was fehlerhaft eingegeben wurde einen roten rand bekommt nachdem das alert-fenster gekommen ist.
mein code sieht mal so aus:
ich hab ein kleines formular gemacht und das wird mit javascript überprüft. nun würd ich gerne machen, dass das feld, was fehlerhaft eingegeben wurde einen roten rand bekommt nachdem das alert-fenster gekommen ist.
mein code sieht mal so aus:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>regulaere Audruecke</title>
<style type="text/css">
<!--
body {
font-family: verdana;
font-size: 10px;
}
h3 {
font-family: verdana;
font-size: 14px;
font-weight: bold;
}
-->
</style>
<script language="javascript">
function pruefen()
{
//variablen festlegen
var name = 0;
var adresse = 0;
var telefon = 0;
var mail = 0;
var datum = 0;
//werte auslesen
name = document.formular.name.value;
adresse = document.formular.adresse.value;
telefon = document.formular.telefon.value;
mail = document.formular.mail.value;
datum = document.formular.datum.value;
//metazeichen
namerichtig = /\w+\s\w/; //findet alles ausser zahlen, wenn man will das es nur text findet muss man "\w" nehmen.
adresserichtig =/\d{4}\s\w+/; //findet text + eine viertellige zahl (d mit 4 stellen
telefonrichtig = /\d{4}\/\d{6,12}/; //findet 4 stellen mit slash und nochmal eine zahlengruppe
mailrichtig = /\w+[@]\w+[.]\w{2,3}/; //findet eine mailadresse mit @ zeichen
datumrichtig = /^[\d]{1,2}\.[\d]{1,2}\.[\d]{2,4}$/; //findet ein datum im format 00.00.0000
//test() schaut ob bedingung zutrifft und schickt true oder false zurück
nam = namerichtig.test(name);
adr = adresserichtig.test(adresse);
tel = telefonrichtig.test(telefon);
mai = mailrichtig.test(mail);
datum = datumrichtig.test(datum);
//prüfen vor abschicken, sonst kein abschicken.
if (nam == true)
{
alert("Kein Fehler im Namen");
}
else
{
alert("Fehler bei der Namenseingabe. Bitte beachten Sie die Eingabehilfen");return false;
}
if (adr == true)
{
alert("Kein Fehler in der Adresse");
}
else
{
alert("Fehler bei der Adresseingabe. Bitte beachten Sie die Eingabehilfen");return false;
}
if (tel == true)
{
alert("Kein Fehler in Telefon");
}
else
{
alert("Fehler bei der Nummerneingabe. Bitte beachten Sie die Eingabehilfen");return false;
}
if (mai == true)
{
alert("Kein Fehler im E-Mail");
}
else
{
alert("Fehler bei der Maileingabe. Bitte beachten Sie die Eingabehilfen");return false;
}
if (datum == true)
{
alert("Kein Fehler im Geburtsdatum");
}
else
{
alert("Fehler bei der Geburtsdatumeingabe. Bitte beachten Sie die Eingabehilfen");return false;
}
}
</script>
</head>
<body>
<h3>Aufgabenstellung:</h3>
<p>Formular mit Eingabefeldern:<br />
-Name<br />
-Adresse (Plz, Ort)<br />
-Telefon<br />
-Email</p>
<p>Überprüfung der Felder auf richtige Eingabe, Anordnung in 3 Spalten (Feldname, Feld, Erklärung)</p>
<h3>Lösung:</h3>
<form id="formular" name="formular" method="post" action="mailto: [email protected]" onsubmit="return pruefen()">
<table width="95%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td width="15%">Feldname:</td>
<td width="13%">Eingabehilfe:</td>
<td width="19%">Eingabefeld:</td>
<td width="53%">Erläuterung:</td>
</tr>
<tr>
<td>Vollständiger Name:</td>
<td>Max Mustermann</td>
<td><label for="name"></label>
<input type="text" name="name" id="name" /></td>
<td>Hier bitte einen Vollständigen Namen eingeben, bestehend aus Vor- und Nachnamen.</td>
</tr>
<tr>
<td>Adresse:</td>
<td>9999 Musterstadt</td>
<td><label for="adresse"></label>
<input type="text" name="adresse" id="adresse" /></td>
<td>Hier bitte die Postleitzahl und den Ort eingeben.</td>
</tr>
<tr>
<td>Telefon:</td>
<td>0800 / 55 55 555</td>
<td><label for="telefon"></label>
<input type="text" name="telefon" id="telefon" /></td>
<td>Hier bitte Ihre Telefonnummer eingeben.</td>
</tr>
<tr>
<td>E-Mail:</td>
<td>[email protected]</td>
<td><label for="mail"></label>
<input type="text" name="mail" id="mail" /></td>
<td>Hier bitte Ihre Email-Adresse eingeben.</td>
</tr>
<tr>
<td>Geburtsdatum:</td>
<td>01.01.1900</td>
<td><label for="datum"></label>
<input type="text" name="datum" id="datum" /></td>
<td>Hier bitte Geburtsdatum eingeben.</td>
</tr>
</table>
<p>
<label for="senden"></label>
<input type="submit" name="senden" id="senden" value="Senden" />
</p>
</form>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
Zuletzt bearbeitet von einem Moderator: