Prüfung beliebiger Formulare

[Enrico]

Hallo,

Jetzt muss ich mich wieder mal vertrauensvoll an Euch wenden, weil ich mit der dynamischen Überprüfung von beliebigen Formularen noch nicht ganz zurande komme.

Zunächst verzeiht bitte die Länge des Postings, aber ich konnte die Länge leider nicht reduzieren.

Alle zu überprüfenden Formulare werden im onload-Handler des Body-Tags zunächst komplett initialisiert:

function Formular_init ()
{
  Anzahl_Pflichtfelder       = 0;
  Ausgefuellte_Pflichtfelder = 0;

Pflichtfeld = new Array ();
  Eingabe_OK  = new Array ();

for (var i = 0; i < document.forms[0].elements.length; i++)
  {
    Eingabe_OK [i] = new Boolean (false);

var Feld_Name = document.forms[0].elements[i].name;

if (Feld_Name.substring (0, 2) == "P_")
    {
      Pflichtfeld [i] = new Boolean (true);
      Anzahl_Pflichtfelder += 1;
    }
    else
      Pflichtfeld [i] = new Boolean (false);
  }
}

Hier werden das Flag für korrekte Eingaben aller Felder auf "false" gesetzt und die Anzahl der auszufüllenden Pflichtfelder über den Vorsatz "P_" im Feldnamen bestimmt.

Die einzelnen Eingabefelder sind immer nach dem gleichen Schema aufgebaut:

<input type="text"
       id="Name"
       name="P_Name"
       onblur="Eingabe_pruefen ('Name',                // ID des Feldes
                                 1,                    // 0 = Pflichtfeld bzw. 1 = optionales Eingabefeld
                                 'Anzeige_1',          // Platzhalter für Grafiktext
                                 'Hinweiszeichen_1')"> // Platzhalter für Grafik "Ausrufezeichen" bei Fehlern

Da ich das zu prüfende Formular anfänglich initialisiere und das aktive Feld immer beim onblur-Ereignis prüfe, habe ich das Kennzeichen "P_" für Pflichtfelder im Feldnamen und das Kennzeichen für Pflichtfelder (siehe oben: 0 = optional bzw. 1 = Pflicht) in der Funktion "Eingabe_prüfen" aufgenommen.

Die Funktion zum Überprüfen der Felder ist folgendermassen aufgebaut:

function Eingabe_pruefen (Feld_ID, Pflicht, Anzeige_ID, Zeichen_ID)
{
  var Formularfeld   = document.getElementById (Feld_ID);
  var Inhalt         = Leerzeichen_entfernen (Tags_loeschen (Formularfeld.value));
  Formularfeld.value = Inhalt;

var Fehler_1 = new Boolean (false); // Pflichtfeld leer
  var Fehler_2 = new Boolean (false); // Feld falsch ausgefüllt
  var OK       = new Boolean (false); /7 Eingabe OK

if (Feld_ID == "Name")
    Regularer_Ausdruck = ...;
  else
    if (Feld_ID == "eMail")
      Regularer_Ausdruck = ...;
    else
      if (Feld_ID == "Homepage")
        Regularer_Ausdruck = ...;
      else
       if (Feld_ID == "Kommentar")
         Regularer_Ausdruck = ...;

if (Inhalt.length == 0)
  {
    if (Pflicht == 1)
    {
      Eingabe_OK [i] = false;
      Fehler_1 = true; // Pflichtfeld leer
    }
  }
  else
  {
    if (! Regularer_Ausdruck.exec (Inhalt))
    {
      Eingabe_OK [i] = false;
      Fehler_2 = true; // Feld falsch ausgefüllt
    }
    else
    {
      Eingabe_OK [i] = true;
      OK = true; // Feld korrekt ausgefüllt
    }
  }

if (Fehler_1 == true) // Pflichtfeld leer
  {
    document.getElementById (Anzeige_ID).src = "pic/gfx/L_formular_eingabe_fehlt.png";
    document.getElementById (Zeichen_ID).src = "pic/gfx/L_formular_fehler.png";
  }
  else
    if (Fehler_2 == true) // Feld falsch ausgefüllt
    {
      document.getElementById (Anzeige_ID).src = "pic/gfx/L_formular_eingabe_ungueltig.png";
      document.getElementById (Zeichen_ID).src = "pic/gfx/L_formular_fehler.png";
    }
    else
      if (Eingabe_OK == true) // Feld korrekt ausgefüllt
      {
        document.getElementById (Anzeige_ID).src = "pic/gfx/L_formular_eingabe_ok.png";
        document.getElementById (Zeichen_ID).src = "pic/gfx/L_spacer.gif";
      }

for (var i = 0; i < document.forms[0].elements.length; i++)
  {
    if (Pflichtfeld [i] == true)
    {
      if (Eingabe_OK [i] == true)
        Ausgefuellte_Pflichtfelder += 1;
    }
  }
/*
  Zu Testzwecken:

if (Ausgefuellte_Pflichtfelder == Anzahl_Pflichtfelder)
    alert ("Alle Pflichtfelder ausgefüllt");
  else
    alert ("Anzahl Pflichtfelder: " + Anzahl_Pflichtfelder + " | ausgefüllt: " + Ausgefuellte_Pflichtfelder);
*/
}

Die Überprüfungen, ob das jeweilige Feld ein Pflichtfeld darstellt oder nicht, ob das jeweilige Feld überhaupt ausgefüllt wurde und wenn ja, ob der jeweilige Inhalt den Richtlinien (Reguläre Ausdrücke) entspricht, klappen eunwandfrei.

Was allerdings nicht funktioniert, ist die Überprüfung, ob die Anzahl der ausgefüllten Pflichtfelder auch der Anzahl der auszufüllenden Pflichtfelder entspricht:

if (Ausgefuellte_Pflichtfelder == Anzahl_Pflichtfelder)

Die Anzahl der vorhandenen Pflichtfelder wird aber in der Funktion "Formular_init ()" richtig ermittelt und in der Funktion "Eingabe_pruefen (...)" auch richtig angezeigt.

Was stimmt an meinem Code noch nicht ?

Vielen Dank für Eure Antworten.

Gruss, Enrico

[MudGuard]

Hi,

Was allerdings nicht funktioniert, ist die Überprüfung, ob die Anzahl der ausgefüllten Pflichtfelder auch der Anzahl der auszufüllenden Pflichtfelder entspricht:

Jedesmal, wenn ein Eingabefeld verlassen wirst, addierst Du die Anzahl der bereits ausgefüllten Felder.

Warum machst Du die Überprüfung nicht erst dann, wenn sie wirklich sinnvoll ist - im onsubmit des Formulars?

cu,
Andreas

[Enrico]

Hallo Andreas,

ich möchte deshalb bei jedem Verlassen eines Feldes prüfen, ob es ein Pflichtfeld darstellt und korrekt ausgefüllt wurde oder nicht, da ich den Button zum Abschicken des Formulares dann erst zur Verfügung stellen will, wenn alle Pflichtfelder korrekt gefüllt wurden.

Wenn ich mir die Inhalte der Variablen "Anzahl_Pflichtfelder" und "Ausgefüllte_Pflichtfelder" anzeigen lasse, dann wird die Anzahl der auszufüllenden Pflichtfelder korrekt angezeigt (in meinem Fall 2, da das Feld "Name" und "Kommentar" Pflichtfelder darstellen), der Wert der ausgefüllten Pflichtfelder ist aber immer 0, auch wenn ich ein Pflichtfeld ausgefüllt habe.

Enrico

[MudGuard]

Hi,

ich möchte deshalb bei jedem Verlassen eines Feldes prüfen, ob es ein Pflichtfeld darstellt und korrekt ausgefüllt wurde oder nicht, da ich den Button zum Abschicken des Formulares dann erst zur Verfügung stellen will, wenn alle Pflichtfelder korrekt gefüllt wurden.

Das halte ich für nicht sinnvoll.

Der User bekommt am Anfang ein Formular zu sehen mit vielen Feldern zum Ausfüllen, sieht aber keine Möglichkeit, das Formular dann auch abzuschicken.
Das dürfte davon abschrecken, das Formular auszufüllen ("Hat ja gar keinen Sinn, die Felder auszufüllen, wenn ich das eh nicht wegschicken kann ...")

cu,
Andreas

[Enrico]

Hallo Andreas,

Habe Deinen Tip sofort befolgt,
nun funktioniert alles wie gewollt.   :-)))

Vielen Dank für Deinen Rat.

Jetzt ist es so, dass ein leeres Pflichtfeld nur optisch als nicht ausgefülltes Pflichtfeld gekennzeichnet wird. Schickt man nun das Formular ab, dann bekommt man eine entsprechende Fehlermeldung.

Gruss, Enrico