• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Sprichwörter und Redewendungen sind das Thema unseres Monatswettbewerbes. Nähere Informationen dazu gibt es natürlich auch, und zwar auf dieser Seite ---> Klick

[JS] feld mit falscher eingabe einfärben

dewey

Gewürzluiken
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:

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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:

zeno

Lane's Prinz Albert
Registriert
05.11.05
Beiträge
4.894
a) Deine Mailüberprüfung schließt .info .mobi etc aus ;)
b) Mittels CSS die gewünschte ID ne Hintergrundfarbe zuweisen
 

dewey

Gewürzluiken
Registriert
01.05.06
Beiträge
5.721
a) Deine Mailüberprüfung schließt .info .mobi etc aus ;)
b) Mittels CSS die gewünschte ID ne Hintergrundfarbe zuweisen
zu a):-D uups...stimmt ist verbesserungswürdig
zu b)o_O hmm und wie mach ich das, dass es nur rot wird, wenn ein fehler drinnen ist? das müsste ja auch mit java gehn oder?
 

zeno

Lane's Prinz Albert
Registriert
05.11.05
Beiträge
4.894
Er Uarghte wegen Java statt JavaScript *vermut*

Man kann mit JS die CSS Eigenschaften setzen, wenn du bis morgen Zeit hast kann ichs mal raussuchen
 

AgentSmith

Hochzeitsapfel
Registriert
15.07.07
Beiträge
9.304
Ich wollte nur sagen, dass Java etwas anderes als JavaScript ist ;)

zeno hat Recht.
 

Slashwalker

Winterbanana
Registriert
15.05.06
Beiträge
2.213
Hier mal mein "Standard" Script. Erfordert script.aculo.us / prototype Framework
Code:
function check(feld){
    if(feld.value =="")
    {

        feld.style.border="1px solid #ff0000";

        alert("Es wurden nicht alle Pflichfelder ausgefüllt.");
        }
        else {
        
        feld.style.border="none";


        
        }
    }
function validate(email){
    if(!email.value.match(/^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i)){
    
alert("Bitte prüfe deine Emailadresse"); 
    email.style.border="1px solid #ff0000";

        
        }
        else {
        
        email.style.border="none";


        
        }
    }
Bei Pflichtfeldern onblur="check(this);" und bei E-Mail onblur="validate(this);" Ich übernehme keine Garantie, was die RegEx angeht :)