1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

[JS] feld mit falscher eingabe einfärben

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von dewey, 02.02.08.

  1. dewey

    dewey Gewürzluiken

    Dabei seit:
    01.05.06
    Beiträge:
    5.732
    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: test@home.com" 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>name@domain.com</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>
    
     
    #1 dewey, 02.02.08
    Zuletzt von einem Moderator bearbeitet: 24.10.08
  2. zeno

    zeno Lane's Prinz Albert

    Dabei seit:
    05.11.05
    Beiträge:
    4.898
    a) Deine Mailüberprüfung schließt .info .mobi etc aus ;)
    b) Mittels CSS die gewünschte ID ne Hintergrundfarbe zuweisen
     
  3. dewey

    dewey Gewürzluiken

    Dabei seit:
    01.05.06
    Beiträge:
    5.732
    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?
     
  4. AgentSmith

    AgentSmith Hochzeitsapfel

    Dabei seit:
    15.07.07
    Beiträge:
    9.361
    Uargh!
     
  5. dewey

    dewey Gewürzluiken

    Dabei seit:
    01.05.06
    Beiträge:
    5.732
    ich machs nicht freiwillig ;) ist ne hausübung für die schule aber das mit dem einfärben wäre so eine art fleißaufgabe die ich gern machen würde :)
     
  6. zeno

    zeno Lane's Prinz Albert

    Dabei seit:
    05.11.05
    Beiträge:
    4.898
    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
     
  7. AgentSmith

    AgentSmith Hochzeitsapfel

    Dabei seit:
    15.07.07
    Beiträge:
    9.361
    Ich wollte nur sagen, dass Java etwas anderes als JavaScript ist ;)

    zeno hat Recht.
     
  8. dewey

    dewey Gewürzluiken

    Dabei seit:
    01.05.06
    Beiträge:
    5.732
    achso...;) ich sag das immer faulheitshalber:D
     
  9. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    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 :)
     

Diese Seite empfehlen