kostenloser Webspace werbefrei: lima-city

Fehlender Name bei Kommentarbox rot anzeigen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   sexyteamlp

   sexyteamlp hat kostenlosen Webspace.

   10:41, 8.8.2012

   Hallöchen liebe Leute :)
   
   Heute geht es um meine Kommentarbox.
   
   Die Kommentarbox ist schön und gut, nun will ich aber, dass zB ein fehlender Name rot angezeigt wird (mit JavaSCRIPT!), also die Box mit "Name" rot umrandet wird. Ich gebe euch mal meinen Code:
   
   _
   
   <form action="neuerbeitrag.php" Method="post">
   <label for="username">Benutzername:</label>
   <br />
   <input type="text" id="username" name="username" size="40" value="" />
   <br />
   <br />
   <label for="EMail">Bitte gib deine Email ein</label>
   <br />
   <input type="text" id="EMail" name="EMail" size="40" value="Email" />
   <br />
   <br />
   <br />
   <span>Kommentar:</span>
   <br />
   <textarea name="inhalt" cols="40" rows="12" wrap="physical"></textarea>
   <br />
   <input type="submit" value="Absenden" />
   </form>
   
   _
   
   So :) Könnte mir das jemand von euch erklären oder mir einen Link zu einem Tutorial geben?
   
   Im Vorraus schon mal vielen dank :)
   
   LG Dex.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. ploco

   

   ploco hat kostenlosen Webspace.

   12:13, 8.8.2012

   <script language="javascript" type="text/javascript">
       function checkName() {
           var username = document.getElementById('username');
           if (username.value == "") {
               username.style.border = "1px solid #FF0000";
               alert('Name ist leer :(');
           }
       }
   </script>
   <form method="post" onsubmit="checkName()">
   <input type="text" id="username" name="username" size="40" value="" />
   [...]
   <input type="submit" value="Absenden" />
   </form>

4. hackyourlife

   Moderator

   hackyourlife hat kostenlosen Webspace.

   12:37, 8.8.2012

   ploco schrieb:
   

   <script language="javascript" type="text/javascript">
       function checkName() {
           var username = document.getElementById('username');
           if (username.value == "") {
               username.style.border = "1px solid #FF0000";
               alert('Name ist leer :(');
           }
       }
   </script>
   <form method="post" onsubmit="checkName()">
   <input type="text" id="username" name="username" size="40" value="" />
   [...]
   <input type="submit" value="Absenden" />
   </form>

   Das hat noch einen Nachteil: Leerzeichen werden mitgezählt. Statt

   username.value == ""

   solltest du

   username.value.trim() == ""

   verwenden.
   
   Noch ein Fehler: wenn dann später etwas eingetragen wurde bleibt der Rahmen erhalten. Du musst also im else-Zweig den Rahmen zurücksetzen.
   
   3. Fehler: bei einem leeren Namen soll das Formular vermutlich nicht abgeschickt werden können.
   
   Ausgebesserter (und ungetesteter) Code:

   <script language="javascript" type="text/javascript"><!--
       function checkName() {
           var username = document.getElementById('username');
           if (username.value.trim() == "") {
               username.style.border = "1px solid #FF0000";
               alert('Name ist leer :(');
               return false;
           } else {
               username.style.border = "";
               return true;
           }
       }
   // --></script>
   <form method="post" onsubmit="return checkName();">
   <input type="text" id="username" name="username" size="40" value="" />
   [...]
   <input type="submit" value="Absenden" />
   </form>

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?