Formularüberprüfung mit Javaschript ohne Popup

V

virtuallunas

Grünschnabel
Hallo zusammen,

lange habe ich auf der Seite gesucht, aber leider noch keine Lösung für mein Problem gefunden! Ich möchte gern ein Anmeldeformular clientseitig überprüfen. Soweit habe ich das Script auch. Doch leider kommen die Fehlermeldung in einem Popup-Fenster. Ich möchte aber gern, daß die Fehlermeldungen jeweils unter den Eingabefeldern erscheint. Leider weiß ich absolut nicht wie ich das realisieren kann. Ich hoffe, daß mir irgendjemand von Euch weiterhelfen kann. Ich weiß zumindest nicht mehr weiter...

Anbei der Quellcode der Seite:
Code: 
<script type="text/javascript">
<!--
function chkanmeldung()
{
if(document.anmeldung.user.value == "")  {
   alert("Bitte Ihren gewünschten Benutzernamen eingeben!");
   document.anmeldung.user.focus();
   return false;
   {

}
 if(document.anmeldung.Vorname.value == "")  {
   alert("Bitte Ihren Vornamen eingeben!");
   document.anmeldung.Vorname.focus();
   return false;
  }
 if(document.anmeldung.Name.value == "") {
   alert("Bitte Ihren Nachnamen eingeben!");
   document.anmeldung.Name.focus();
   return false;
  }
 if(document.anmeldung.Strasse.value == "") {
   alert("Bitte Ihren Strasse eingeben!");
   document.anmeldung.Strasse.focus();
   return false;
  }
 if(document.anmeldung.Hausnummer.value == "") {
   alert("Bitte Ihren Hausnummer eingeben!");
   document.anmeldung.Hausnummer.focus();
   return false;
  }
 if(document.anmeldung.PLZ.value == "") {
   alert("Bitte Ihre PLZ eingeben!");
   document.anmeldung.PLZ.focus();
   return false;
  }
 if(document.anmeldung.Wohnort.value == "") {
   alert("Bitte Ihren Wohnort eingeben!");
   document.anmeldung.Wohnort.focus();
   return false;
  }
 if(document.anmeldung.Land.value == "such Dir eins aus") {
   alert("Bitte das richtige Land auswählen!");
   document.anmeldung.Land.focus();
   return false;
  }
 if(document.anmeldung.Email.value == ""
|| document.anmeldung.Email.value.match(/^[a-zA-Z0-9_\.-]{2,}@[a-z0-9-]{3,}\.[a-z]{2,4}) {
   alert("Bitte Ihre gültige E-Mail-Adresse eingeben!");
   document.anmeldung.Email.focus();
   return false;
  }
 if(document.anmeldung.Tag.value == "Tag"
   || document.anmeldung.Monat.value == "Monat"
   || document.anmeldung.Jahr.value == "Jahr") {
   alert("Bitte Ihr Alter eingeben!");
   document.anmeldung.Tag.focus();
   return false;
  }
}
//-->
</script>
und noch das Script für das Formular:
Code: 
<form name="anmeldung" method="POST" action="mailer.php" onSubmit="return chkanmeldung()">
              <div align="center">
            <table border="0" cellpadding="0" cellspacing="0" width="400">
              <tr>
        <td><font size="1"><b>Benutzername*</b></font></td>
        <td><input type="text" name="user" size="30"></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>Vorname*</b></font></td>
        <td><input type="text" name="Vorname" size="30"></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>Name*</b></font></td>
        <td><input type="text" name="Name" size="30"></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>Strasse*</b></font></td>
        <td><input type="text" name="Strasse" size="30"></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>Hausnummer*</b></font></td>
        <td><input type="text" name="Hausnummer" size="30" maxlength="4"></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>PLZ*</b></font></td>
        <td><input type="text" name="PLZ" size="30" maxlength="6"></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>Wohnort*</b></font></td>
        <td><input type="text" name="Wohnort" size="30"></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>Land*</b></font></td>
        <td><select name="Land">
        <option value="such Dir eines aus">such Dir eines aus</option>
    ...
        </select></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>Emailadresse*</b></font></td>
        <td><input type="text" name="Email" size="30"></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>Geburtsdatum*</b></font></td>
        <td><select name="Tag">
            <option value="Tag">Tag</option>
            <option value="01">01</option>
        ...
          </select><select name="monat">
          <option value="Monat">Monat</option>
          <option value="01">01</option>
          ...
          </select><select name="Jahr">
          <option value="Jahr">Jahr</option>
          <option value="1990">1990</option>
         ...
          </select></td>
              </tr>
              <tr>
        <td></td>
        <td></td>
              </tr>
              <tr>
        <td><font size="1"><b>eigene Webseite?</b></font></td>
        <td><input type="text" name="Webseite" size="30" value="www.deine-seite.de"></td>
              </tr>
              <tr>
                <td></td>
                <td></td>
              </tr>
            </center>
            <tr>
              <td align="center">
                <p align="right"></td>
              <td align="center">
                <p align="left"><input type="submit" value="Abschicken" title="submit"><input type="reset" value="Löschen" title="löschen"></td>
            </tr>
          </table>
        </div>
        <center>
        <p>&nbsp;</p>
        </form>

Vielen Dank für eventuelle Hilfe
Virtuallunas
 
nur so ne Idee...

(ohne deinen Code durchgelesen zu haben...)

Du könntest unter jedes Textfeld ein div einbauen, welches am Anfang leer ist.
Bei einem Fehler könntest du in das jeweilige div die Fehlermeldung schreiben.

Das heißt

alert("Bitte Ihre PLZ eingeben!");

wird zu

document.getElementById("divId").innerHTML = "Bitte Ihre PLZ eingeben!";
 
Danke

DANKE!
Deine Idee hat geholfen, aber nun habe ich folgendes Problem:
Nachdem der User nun das fehlende/falsche Feld richtig ausgefüllt hat, verschwindet aber die Fehlermeldung nicht. D.h. bei dem User erscheint der Eindruck, daß er immer noch einen Fehler in dem Feld hat obwohl er es korrekt ausgefüllt hat.

Kann mir hier bei dem vorraussichtlich letzten Problem noch jemand helfen?

Vielen Dank im Voraus!
Virtuallunas
 
Dann musst du das onSubmit noch einmal folgendermaßen ändern:
Code: 
onSubmit="return chkanmeldung();"

//wird zu
onSubmit="unsetErrors(); return chkanmeldung();"
Dann schreibst du dir noch die Funktion unsetErrors() in den Inhalt aller divs wieder löscht.
 
Aber....

wie schreibe ich mir die Funktion unsetErrors()
Sorry, aber weder hier noch bei selfhtml habe ich dazu etwas gefunden.

Danke!
Virtuallunas
 
Du musst sie ja nicht unsetErrors() nennen, war nur ein Beispielname ;)
Code: 
<script language="JavaScript">
<!--
    function unsetErrors() {
        document.getElementById("divId").innerHTML = "";
    }
//-->
</script>
...und das dann eben für jedes div mit entsprechender ID.
Sorry, mein Fehler, ich hab mich unverständlich ausgedrückt ;)
 
Ich weiß...

das ich mich langsam etwas blöd anstellen, aber...
Das mit der Fehlermeldung im Formular habe ich jetzt hingekriegt. Danke!
Das mit der Aktualisierung habe ich auch hingekriegt. Danke!

Aber mein nächstes Problem, was sich dabei nun stellt ist, daß er die Felder des Formulars in einer Tabelle komplett verschiebt.
Ich habe zu jedem Feld mehrere Fehlermeldungen (Zeichenanzahl, Buchstaben-Zahlen und ob das Feld leer ist). Nun schreibt er von der Logik her alle drei Fehlermeldungen untereinander (je nachdem welche momentan gültig ist). Ich dachte aber eigentlich, daß es möglich ist, dafür nur eine Zeile zu nutzen. D.h. wenn im Feld Zahlen sind, schreibt er die Fehlermeldung genau in die gleiche Zeile wie wenn die Eingabe zu kurz ist.
Das ist echt unschön, wenn sich das ganze Formular um 3 Fehlermeldungs-Zeilen verschiebt, man aber nur eine sieht.
Ich kann mir vorstellen, daß das einige Blödsinn finden, aber mir ist es schon wichtig.
Desweiteren frage ich mit der Funktion !isNaN ab, ob im Feld Vorname bzw. Nachname Zahlen vorkommen. Dies funktioniert solange nur Zahlen im Feld sind. Tauchen aber nach den Zahlen Buchstaben auf, erkennt er das nicht mehr als Fehler. Weiß hier jemand, wie ich das einfacher abfragen kann, damit in den Feldern wirklich nur Buchstaben auftauchen und keine Zahlen?

Viele Grüße
Virtuallunas
 
Das letzte (mit den Buchstaben) kannst du mit einem regulären Ausdruck lösen:
Code: 
var regEx = /^[a-z]*$/isU;
if(Textfeld.test(regEx)) {
    //true
}
else {
    //false
}
Der reguläre Ausdruck lässt nur Buchstaben (a-z und A-Z) zu!

Dein erstes Problem habe ich nicht ganz verstanden: Willst du das - unabhängig der Fehlermenge - immer nur maximal eine Fehlermeldung ausgegeben wird (sortiert nach Priorität der Meldung), oder willst du das immer soviele Fehlermeldungen ausgegeben werden, wie gefunden werden?

PS: Kannst du bitte nochmal dein jetziges Script zum Einsetzen der Fehlermeldungen posten?
 
Danke split...

das Du Dir soviel Mühe mit mir gibst...
Aber jetzt weiß ich nicht mehr wo ich denn von Dir genannten Ausdruck unterbringen soll.
Anbei nochmal das Script zur Überprüfung, welches nun immer größer wird...:eek:
Code: 
<script type="text/javascript">
<!--
function chkanmeldung()
{ if(document.anmeldung.user.value == "")  {
   document.getElementById("err_user").innerHTML = "Bitte Benutzernamen eingeben!";
   document.anmeldung.user.focus();
   return false;  }
  if(document.anmeldung.user.value.length <5  ){
    document.getElementById("err_user2").innerHTML = "Bitte mindestens 5 Zeichen!";
    document.anmeldung.user.focus();
    return false;  }
    if(document.anmeldung.user.value(regEx)){
document.getElementById("err_user1").innerHTML = "Bitte keine Sonderzeichen!";
document.anmeldung.user.focus();
return false;}
   if(document.anmeldung.Vorname.value == "") {
   document.getElementById("err_vname").innerHTML = ("Bitte Vornamen eingeben!");
   document.anmeldung.Vorname.focus();
   return false;  }
  if(document.anmeldung.Vorname.value == /^[a-z][A-Z]/){
document.getElementById("err_vname1").innerHTML = "Bitte keine Zahlen!";
document.anmeldung.Vorname.focus();
return false;}
if(document.anmeldung.Vorname.value.length <3  ){
    document.getElementById("err_vname2").innerHTML = "Bitte kompletten Vornamen!";
    document.anmeldung.Vorname.focus();
    return false;
  }
 if(document.anmeldung.Name.value == "") {
   document.getElementById("err_name").innerHTML = "Bitte Nachnamen eingeben!";
   document.anmeldung.Name.focus();
   return false;
  }
  if(document.anmeldung.Name.value == /^[a-z][A-Z]/){
document.getElementById("err_name1").innerHTML = "Bitte keine Zahlen!";
document.anmeldung.Name.focus();
return false;
}
if(document.anmeldung.Name.value.length <5  ){
    document.getElementById("err_name2").innerHTML = "Bitte kompletten Nachnamen!";
    document.anmeldung.Name.focus();
    return false;
  }
 if(document.anmeldung.Strasse.value == "") {
   document.getElementById("err_strasse").innerHTML = "Bitte Strasse eingeben!";
   document.anmeldung.Strasse.focus();
   return false;
  }
  if(document.anmeldung.Strasse.value == /^[a-z][A-Z]/){
document.getElementById("err_strasse1").innerHTML = "Bitte keine Zahlen!";
document.anmeldung.Strasse.focus();
return false;
}
 if(document.anmeldung.Hausnummer.value == /^[a-z][A-Z][0-9]/) {
   alert("Bitte Ihren Hausnummer eingeben!");
   document.anmeldung.Hausnummer.focus();
   return false;
  }
 if(document.anmeldung.PLZ.value == /^[0-9]/) {
   alert("Bitte Ihre PLZ eingeben!");
   document.anmeldung.PLZ.focus();
   return false;
  }
 if(document.anmeldung.Wohnort.value == "") {
   alert("Bitte Ihren Wohnort eingeben!");
   document.anmeldung.Wohnort.focus();
   return false;
  }
 if(document.anmeldung.Land.options.value == "") {
   alert("Bitte das richtige Land auswählen!");
   document.anmeldung.Land.focus();
   return false;
  }
 if(document.anmeldung.Email.value == "") {
   alert("Bitte Ihre E-Mail-Adresse eingeben!");
   document.anmeldung.Email.focus();
   return false;
  }
  if(document.anmeldung.Email.value.match(/^[a-zA-Z0-9_\.-]{2,}@[a-z0-9-]{3,}\.[a-z]{2,4}|museum$/)) {
   alert("Bitte Ihre gültige E-Mail-Adresse eingeben!");
   document.anmeldung.Email.focus();
   return false;
  }
 if(document.anmeldung.Tag.options.value == "Tag") {
   alert("Bitte gib Deinen Geburtstag an!");
   document.anmeldung.Tag.focus();
   return false;
  }
  if(document.anmeldung.Monat.options.value == "Monat") {
  alert("Bitte gib Deinen Geburtsmonat an!");
  document.anmeldung.Monat.focus();
  return false;
  }
   if(document.anmeldung.Jahr.options.value == "Jahr") {
  alert("Bitte gib Deinen Geburtsjahr an!");
  document.anmeldung.Jahr.focus();
  return false;
  }
}
//-->
<!--
    function unsetErrors() {
        document.getElementById("err_user").innerHTML = "";
        document.getElementById("err_user1").innerHTML = "";
        document.getElementById("err_user2").innerHTML = "";
        document.getElementById("err_vname").innerHTML = "";
        document.getElementById("err_vname1").innerHTML = "";
        document.getElementById("err_vname2").innerHTML = "";
        document.getElementById("err_name").innerHTML = "";
        document.getElementById("err_name1").innerHTML = "";
        document.getElementById("err_name2").innerHTML = "";
        document.getElementById("err_strasse").innerHTML = "";
        document.getElementById("err_strasse1").innerHTML = "";
    }
//-->
</script>
Und im Formular habe ich nun die Fehlermeldungen eingebaut, aber dadurch bauscht sich das Formular auf, denn wenn ich Feld user bearbeiten lassen, macht er in den anderen Feldern schon den Platz für die Fehlermeldungen der anderen Felder. Richtig, ich möchte, daß immer nur eine Fehlermeldung ausgegeben wird pro Feld (wenn vorhanden) und das nach Priorität. Aber wie lege ich die Priorität fest? Nach der Auflistung in der funktion chkanmeldung?
Anbei auch nochmals das Formularscript mit den entsprechend eigepflegten Fehlermeldungen.
Code: 
<form name="anmeldung" method="POST" action="mailer.php" onSubmit="unsetErrors(); return chkanmeldung()">
              <div align="center">
            <table border="0" cellpadding="0" cellspacing="0" width="400">
              <tr>
        <td height="35" width="120"><b>Benutzername*</b></td>
        <td height="35"><input type="text" name="user" size="20" maxlength="15"></td>
        <td height="35"><font size="1" color="#FF0000"><div ID = "err_user"></div><div ID = "err_user1"></div><div ID = "err_user2"></div></font></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>Vorname*</b></td>
        <td height="35"><input type="text" name="Vorname" size="20"></td>
        <td height="35"><font size="1" color="#FF0000"><div ID = "err_vname"></div><div ID = "err_vname1"></div><div ID = "err_vname2"></div></font></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>Name*</b></td>
        <td height="35"><input type="text" name="Name" size="20"></td>
        <td height="35"><font size="1" color="#FF0000"><div ID = "err_name"></div><div ID = "err_name1"></div><div ID = "err_name2"></div></font></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>Strasse*</b></td>
        <td height="35"><input type="text" name="Strasse" size="20"></td>
        <td height="35"><font size="1" color="#FF0000"><div ID = "err_strasse"></div><div ID = "err_strasse1"></div></font></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>Hausnummer*</b></td>
        <td height="35"><input type="text" name="Hausnummer" size="20" maxlength="4"><td height="35"></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>PLZ*</b></td>
        <td height="35"><input type="text" name="PLZ" size="20" maxlength="6"></td>
        <td height="35"></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>Wohnort*</b></td>
        <td height="35"><input type="text" name="Wohnort" size="20"></td>
        <td height="35"></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>Land*</b></td>
        <td height="35"><select name="Land" size="1">
        <option value="" selected></option>
        <option value="Deutschland">Deutschland</option>
...
        </select></td>
        <td height="35"></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>Emailadresse*</b></td>
        <td height="35"><input type="text" name="Email" size="20"></td>
        <td height="35"></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>Geburtsdatum*</b></td>
        <td height="35"><select name="Tag" size="1">
            <option selected value="Tag">Tag</option>
            <option value="01">01</option>
...
          </select><select name="Monat" size="1">
          <option selected value="Monat">Monat</option>
          <option value="01">01</option>
 ...
          </select><select name="Jahr" size="1">
          <option selected value="Jahr">Jahr</option>
          <option value="1990">1990</option>
          ...
          </select></td>
        <td height="35"></td>
              </tr>
              <tr>
        <td height="35" width="120"><b>eigene Webseite?</b></td>
        <td height="35"><input type="text" name="Webseite" size="20" value="www.deine-seite.de"></td>
        <td height="35"></td>
              </tr>
              <tr>
        <td height="35" width="120"></td>
        <td height="35"></td>
        <td height="35"></td>
              </tr>
              <tr>
        <td width="120"></td>
        <td><input type="submit" value="Abschicken" title="submit"><input type="reset" value="Löschen" title="löschen"></td>
        <td></td>
              </tr>
            </center>
          </table>
        </div>
        <center>
        </form>

Viele Grüße
Virtuallunas
 
.....da "inner.HTML" nur vom Internet Explorer verstanden wird, würde ich anraten statdessen , die Divs ein und ausblenden zu lassen, damit z.B. Mozilla User auch etwas davon haben.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück