Carmen Fries: Formularüberprüfung

Hallo JS Leute ;-).

Wie stelle ich es denn an, dass in einem Formular ein Feld (einzeiliges Eingabefeld)überprüft wird, ob es leer ist ? Ich meine aber nicht mit dem Submit Tag, sondern ich möchte gerne direkt eine Alert-Meldung am Bildsschirm. Gibt es einen Event-handler in HTML, den ich aufrufen kann, wenn man in dem Formular einfach den TAB benutzt um, in das nächste Feld zu gelangen ? Und dieser ruft dann das Java Script Programm auf ?

Meine Idee war so:

Java Script:

function NameAn()
{
if(document.Form1.NameAn.value == "")
 {
 alert("Bitte einen Namen eingeben!");
 return false;
 }

im HTML:

<input type="text" name="NameAn" size="60" onChange = "NameAn()"></td>

Aber das funktioniert nicht. Ich bekomme nur die Fehlermeldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Kann mir jemand helfen ???
LG
Carmen

  1. Hi,

    Ich meine aber nicht mit dem Submit Tag,

    einen <submit>-Tag kenne ich nicht. Meinst Du den onSubmit-Event-Handler?

    Gibt es einen Event-handler in HTML, den ich aufrufen kann, wenn man in dem Formular einfach den TAB benutzt um, in das nächste Feld zu gelangen ?

    Nein. Es gibt allerdings onBlur, welches feuert, wenn ein fokussiertes Element verlassen wird.

    Was ist übrigens, wenn der User erst ein anderes Eingabefeld ausfüllen möchte? Ich finde, Du solltest ihn nicht dergestalt bevormunden.

    if(document.Form1.NameAn.value == "")

    [...]

    <input type="text" name="NameAn" size="60" onChange = "NameAn()"></td>

    In welchem Kontext steht der <input>-Tag innerhalb der HTML-Struktur?

    Aber das funktioniert nicht. Ich bekomme nur die Fehlermeldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.

    Wo (in welcher Zeile/Spalte) tritt der Fehler auf?

    Cheatah

    1. Tagchen auch !

      Was ist übrigens, wenn der User erst ein anderes Eingabefeld ausfüllen möchte? Ich finde, Du solltest ihn nicht dergestalt bevormunden.

      mein erster Gedanke als ich das Posting las :-)

      Bei einer sequentiellen Eingabe könnten wir uns die ganze Ereignissprogrammierung und damit viel Ärger ersparen ;-)

      Aber genug gemeckert. Wie wär's mit diesem Lösungsansatz:

      im Skript Teil:

      function chkform()
      {
       if ( (chkName() ) && (chkEmail()) && (chkText()) ) {
           parent.frames[1].document.forms[0].submit();
       }
      }

      function chkEmail()
      {
       if (document.forms[0].elements[1].value == "")
        {
         alert("\nDeine e-mail Adresse fehlt.\nGib bitte deine e-mail Adresse ein.")
         document.forms[0].elements[1].focus();
         return false;
        }
        else
        {
        return true;
        }
      }
      // andere Funktionen wurden weggelassen

      ... und im HTML Teil:

      <form action="cgi-bin/do_something.cgi" method=post>
      Deine email:
      <input style="background-color:#eeeed0;" type=text size=28 maxlength=63  name="mail">

      <a href="javascript:chkform();">Absenden</a>
      </form>

      Setzt natürlich vorraus das dies das erste(!) Formular in der Seite ist (sonst müsstest du in den Funktionen 'forms[0]' demendsprechend abändern)

      Die Idee stammt übrigens nicht von mir (ich setze sie nur erfolgreich ein), sondern von: Javascript-Notizen
      http://www.netz-notizen.de/javascript/
      ... und wenn ihr mich teert und federt, ich kann mich nicht mehr erinnern wo da genau.

      MfG McNavc

      PS: // <- da kam mal wieder der C Programmierer durch :-)
      PPS: für alle die's nicht wissen, das ist ein Kommentar ;-)

      1. Man sollte eben nicht auf die Schnelle per Copy&Paste die relevanten Zeilen aus seiner Seite ziehen ohne zu berücksichtigen in welchem Zusammenhang man sie geschrieben hat :(

        Wie unschwer (?) zu erkennen ist haben sich folgende Fehler eingeschlichen:

        parent.frames[1].document.forms[0].submit();

        ... macht natürlich nur Sinn, wenn dein Formular im zweiten Frame liegt

        if (document.forms[0].elements[1].value == "")

        muss für das Beispiel natürlich   ^^^ [0] lauten

        document.forms[0].elements[1].focus();

        s.o.   ^^^ [0]
        ... ist übrigens nur als Service für den user gedacht und hat keine Auswirkungen auf die Eingabeüberprüfung

        MfG McNavc *schäm*

    2. Hallo,

      [...]Meinst Du den onSubmit-Event-Handler?

      Ja, den meinte ich.Es tut mir leid, habe mich in der Hektik total falsch ausgedrückt.

      [...]Es gibt allerdings onBlur, welches feuert, wenn ein fokussiertes Element verlassen wird.

      Das habe ich auch schon ausprobiert und es kommt diesselbe Fehlermeldung:-(.

      Was ist übrigens, wenn der User erst ein anderes Eingabefeld ausfüllen möchte? Ich finde, Du solltest ihn nicht dergestalt bevormunden.

      Da hast du (und die anderen)vollkommen recht.Zur Entschuldigung:

      das Ganze ist nicht auf meinem Mist gewachsen, sondern die Idee
      meines Chefs.

      In welchem Kontext steht der <input>-Tag innerhalb der HTML-Struktur?

      Ich weiß zwar nicht ,ob ich jetzt Kontext richtig definiere und dir das Richtige mitteile, aber es definiert ein Texteingabefeld, in welchem ein Benutzer seinen Namen bzw, den Namen seiner Firma schreiben soll.

      [....]die Fehlermeldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.[....]Wo (in welcher Zeile/Spalte) tritt der Fehler auf?

      Der Fehler tritt im HTML bei den Zeilen auf, bei denen ich den OnChange bzw. OnBlur Event-Handler eingesetzt habe.

      Könnte ich dir einmal das ganze Teil schicken, da es zu groß ist, um es hierher zu kopieren ? Ich glaube, du könntest dir dann einen besseren Überblick verschaffen.( aber nur, wenn es nicht zu viel verlangt ist)

      Danke an dich und die anderen für Ihre Unterstützung im voraus.

      Ganz liebe Grüße

      Carmen

      1. Hi,

        Da hast du (und die anderen)vollkommen recht.Zur Entschuldigung:

        kleiner Tip: Wenn Du die "»» " am Anfang der Zeile weglässt, wird Dein Text nicht als Zitat markiert, und ich finde auch, was Du geschrieben hast.

        das Ganze ist nicht auf meinem Mist gewachsen, sondern die Idee
        meines Chefs.

        Als Entwickler hast Du auch beratende Aufgaben. Du solltest Deinem Chef die Problematik nahebringen und ihm empfehlen, diese Idee nicht umsetzen zu lassen.

        Ich weiß zwar nicht ,ob ich jetzt Kontext richtig definiere

        Ich wollte eigentlich grob die (für JavaScript relevante) HTML-Struktur erfahren; also etwa <body><div id="bla"><form name="blub"><input>...

        Der Fehler tritt im HTML bei den Zeilen auf, bei denen ich den OnChange bzw. OnBlur Event-Handler eingesetzt habe.

        Innerhalb des Funktionsaufrufes durch den Event-Handler? Ich hätte eigentlich mit einer Stelle der Funktion selbst gerechnet - die Du uns dann natürlich genauer nennen solltest.

        Könnte ich dir einmal das ganze Teil schicken,

        Bitte nicht. Stell's online, nenne uns die URL.

        da es zu groß ist, um es hierher zu kopieren ?

        Diese Entscheidung unterstütze ich allerdings :-)

        Cheatah

  2. hi,

    schau Dir den tst mal an, kannst Du um beliebige Form-Elemente erweitern. Btw: _ohne_ form-tag ist ein input kein form-element!

    hth

    Gruesse  Joachim

    <html>
    <head>

    <script language="JavaScript">
    function formCheck()
    {
        // alle Elementnamen hier eintragen
        var myEl  = new Array("Nachname","Vorname");
        // formname hier: "feld"
        var dFe         = document.feld.elements;

    for(i in myEl)
     {
            if (dFe[myEl[i]].value == "")
      {
                alert("Bitte " + myEl[i] + "ausfuellen");
       dFe[myEl[i]].focus();
       return false;
            }
        }
     return true;
    }
    </script>

    </head>
    <body text="#000000" bgcolor="#fefefe">

    <form action="http://www.xxx.url.htm" method="get" Name="feld" onsubmit="return formCheck()">
     <input NAME="Nachname" TYPE="text" SIZE="20"> Name <br>
     <input NAME="Vorname" TYPE="text" SIZE="20"> Vorname <br>
     <input TYPE="submit" value="go">
    </form>

    </body>
    </html>

  3. Morjen !

    Hab da gestern wohl nicht ganz mitbekommen was du willst :(

    Natürlich ist der onBlur Event die Lösung (siehe posting von Cheatah)

    Hier eine Möglichkeit:

    <html>
    <head>
    <title>test</title>

    <script language="JavaScript">
    <!--
    var test=0;
    function check(feld)
    {
    if((document.forms[0].elements[feld].value == "") && (test == feld))
     {
     test=feld;
     alert("Bitte Feld " + feld + " ausfuellen!");
     document.forms[0].elements[feld].focus();
     return false;
     }
    }
    //-->
    </script>

    <body>
    <form action="" methode=post>
    <input type="text" name="NameA" size="60" onBlur = "check(0)">
    <input type="text" name="NameB" size="60" onBlur = "check(1)">
    </form>
    </body></html>

    (kurz angetestet und ok)

    Das seltsame Konstrukt mit der Variable 'test' sollte ich vielleicht kurz erläutern:
    onBlur meldet zwar das Verlassen des Feldes (sonst würde ja die Funktion nicht starten ;-)), bricht aber das Ereignis (Wechseln zum nächsten Feld) _nicht_ ab. Wenn die Funktion jetzt den Fokus wieder an das nicht ausgefüllte Feld gibt, hat aber bereits das nächste Feld den Fokus -> onBlur (Verlassen) tritt ein, die Funktion wird erneut aufgerufe, stellt fest das das nächste Feld leer ist, setzt den Fokus ...... eine wunderschöne Endlosschleife -> Affengriff - getestet :)

    Möglicherweise gibts eine elegantere Art dieses Problem in den Griff zu bekommen, aber als quick'n'dirty sollte es durchgehen

    MfG McNavc

    1. Nochmals morjen !

      Doch etwas zu 'quick' und um einiges zu 'dirty' ;-)
      Natürlich muss die Funktion so aussehen:

      function check(feld)
      {
       if(document.forms[0].elements[feld].value == "")
        {
        if(test == feld)
         {
          alert("Bitte Feld " + feld + " ausfuellen!");
          document.forms[0].elements[feld].focus();
          return true;
         } else
        test=feld;
       }
      }

      </script>

      ... und hier fehlt natürlich ein:
      </head>

      Hab ich vor lauter Freude das die Endlosschleife weg war glatt übersehen :(

      MfG McNavc