kostenloser Webspace werbefrei: lima-city

Formular mit Javascript überprüfen

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

1. Autor dieses Themas

   ultimate-bravery

   ultimate-bravery hat kostenlosen Webspace.

   20:56, 20.3.2013

   Hallo zusammen,
   
   ich kenne mich leider recht wenig mit Javascript aus, deswegen brauche ich eure Hilfe.
   
   Ich bin dabei, eine Registrierung zu programmieren. Nun soll geprüft werden, ob alle Textfelder ausgefüllt sind. Dazu habe ich auch schon einen passenden Code gefunden:
   
   Javascript Code:
   

   <script type="text/javascript">
   function chkFormular () {
     if (document.registrieren.spielername.value == "") {
       alert("Bitte trage einen Spielernamen an!");
       document.Formular.User.focus();
       return false;
     }
     if (document.registrieren.email.value == "") {
       alert("Bitte gib eine E-Mail Adresse an!");
       document.Formular.Ort.focus();
       return false;
     }
     if (document.registrieren.email.value.indexOf("@") == -1) {
       alert("Das ist keine E-Mail Adresse!");
       document.registrieren.Mail.focus();
       return false;
     }
     if (document.registrieren.pw.value == "") {
       alert("Bitte gib ein Passwort ein!");
       document.Formular.Mail.focus();
       return false;
     }
     if (document.registrieren.pw2.value == "") {
       alert("Bitte wiederhole dein Passwort!");
       document.Formular.Mail.focus();
       return false;
     }
   }
   </script>

   
   
   Formular:
   

   <form action="registrieren.php" method="post" name="registrieren" onsubmit="return chkFormular()">
   ...

   
   
   Allerdings finde ich die Variante mit den "alert" Fenstern nicht so schön. Viel besser finde ich die Variante, die ich z.B. bei dem Spiel Ogame gefunden habe: http://ogame.de/ Die Registrierung ist direkt auf der Startseite, dort könnt ihr euch sie angucken. Wenn ein Feld leer ist und man auf "Registrieren" klickt, erscheint eine Meldung neben dementsprechendem Textfeld. Die Eingaben werden Clientseitig geprüft und nicht an den Server weitergegeben, solange ein Feld leer ist. Und als Fehlermeldung öffnet sich halt kein Fenster sondern es kommt nur diese Meldung. Da ich nicht weiß, wie man diese Art von Infomeldung nennt, weiß ich nicht, wonach ich suchen muss.
   
   Deswegen frage ich hier, ob mir jemand dabei helfen kann, sodass ich das genau so hin bekomme wie bei der Ogame Registrierung. Ich würde mich sehr über Hilfe freuen.
   
   Liebe Grüße

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

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

3. seven-sign

   

   seven-sign hat kostenlosen Webspace.

   23:33, 23.3.2013

   Moin,
   wie wäre es mit Ajax?
   Hier mal ein Beispiel:
   
   http://jqueryfordesigners.com/using-ajax-to-validate-forms/
   
   Extra noch ein Link zwecks "User-Vorhanden-Abfrage":
   
   http://staticfloat.com/php-programmieren/on-thy-fly-mit-ajax-und-php-prufen-ob-benutzername-noch-verfugbar-ist/
   
   Alternativ für google.de:
   
   ajax input validation
   
   MfG

4. hackyourlife

   Moderator

   hackyourlife hat kostenlosen Webspace.

   23:48, 23.3.2013

   Nachdem die ogame-Seite gerade nicht funktionieren will muss ich es mir wohl vorstellen…
   
   Du machst neben jedem Eingabefeld das ausgefüllt werden soll ein span oder sonst was mit einer entsprechenden Fehlermeldung und versteckst es per CSS. Wenn du nun deine Eingaben überprüfst und feststellst, dass etwas fehlt, entfernst du die "Unsichtbarkeit" von dem Element und die Meldung wird sichtbar.
   
   @seven-sign:
   Ajax braucht es für die Fragestellung des TE nicht, da er nur bei leeren Feldern einen Fehler anzeigen will und deshalb keine Client → Server-Kommunikation stattfindet.

5. seven-sign

   

   seven-sign hat kostenlosen Webspace.

   0:24, 24.3.2013

   Moin,
   @hackyourlife und wie soll dann z.B. die Username abfrage laufen?
   Klar, mag eine Lösung mit none und block für einiges reichen,
   nur können CSS und Js hellsehen ob der Username bereits in der DB ist?
   
   Wenn hier nach einem ähnlichen "Script" gefragt wird,
   sollten auch solche Aspekte bedacht werden.
   
   Ansonsten ein eher unschönes Beispiel zu hackyourlife´s Lösung:
   http://www.tutorials.de/javascript-ajax/302319-input-mit-js-ueberpruefen-wenn-nicht-ausgefuellt-soll-einen-meldung-im-div-erscheinen.html
   
   MfG

6. timebandit

   timebandit hat kostenlosen Webspace.

   8:01, 25.3.2013

   Eine Alternative wäre ein Affenformular
   Das macht von JS unabhängig, d.h. auch User mit deaktiviertem JS haben keine Probleme bei der Registrierung.
   Dazu benötigst du nur ein HTML-Template und ein verarbeitendes PHP-Script.

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

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

Dir gefällt dieses Thema?