einfache Validierung eines Formulars möglich?

[Leo]

Hallo,
ich hab leider kaum Ahnung von Javascript, muß dennoch ein kleines Problem damit lösen, vielleicht könnt Ihr mir helfen?
Ich habe ein Programm in PHP geschrieben, welches ca. 50 verschiedene Formulare generiert, je ca. 4-10 Inputfelder mit Text, Radiofelder, und Comboboxen. Nun soll ein kleines Javascript her, welches beim Überfahren des Send-Buttens prüft, ob jedes Feld ausgefüllt ist bzw. bei Radiofeldern ein Wert gwählt wurde. Falls Irgendein Feld leer ist, soll nicht zur nächsten Seite gelinkt werden, sondern eine einfache altert-Meldung aufgehen, die nichts anderes sagt als "Es sind nicht alle Felder ausgefüllt."
Ist sowas möglich und falls ja, wie???
Ich hab schon ne Menge gegoogelt und Stunden in Foren gesucht, aber leider nix richtiges gefunden. Ich dachte, irgendwie müsste man dynamisch die einzelnen Elemente in ein Array packen und durchprüfen (dynamisch, da jedes Formular unterschiedlich viele Felder hat und ein Script genügen soll). Falls eines FALSE ist, ist das ganze Formular FALSE und die Meldung poppt auf, eine Weiterleitung soll dann unterbunden bleiben.
Vielen Dank schon mal,
Leo

[Knusperklumpen]

Hi ... warum alles in ein Array packen? Es gibt doch in JS schon entsorechende Objekte.

< http://de.selfhtml.org/javascript/objekte/forms.htm>

mfg
Knusperklumpen

[sandra]

Hi,

du musst auf die einzelnen formularfelder zugreifen und überprüfen. Du darfst keinen Submit-Button ins Formular schreiben, machst stattdessen nen link und musst dem Formular nen namen (id) geben.

<a href="javascript:send();">Anmelden</a>

das Javascript:

function send(){
if (document.deinForumularName.IDdesInputFeldes.value.length > 0 &&
    document.deinForumularName.IDdesAnderenInput.value.length > 0){
          document.deinForumularName.submit();
}
}

[Struppi]

Du darfst keinen Submit-Button ins Formular schreiben, ...

das ist Blödsinn, natürlich darf man einen oder mehrere Submitbuttons benutzen, du kann ohne Probleme das abschicken verhindern, wenn der submit Handler des Formulares false zurückgibt.
So wie du es machst ist das absenden unnötigerwiese auf JS beschränkt.

Struppi.

[Leo]

Hmmm, gut, aber wie kann ich feststellen, wieviele IDdesInputFeldes ich habe? Jedes Formular wird dynamisch erzeugt und hat unterschiedlich viele InputFelder(Text, Radio, ComboBox)

Hi,

du musst auf die einzelnen formularfelder zugreifen und überprüfen. Du darfst keinen Submit-Button ins Formular schreiben, machst stattdessen nen link und musst dem Formular nen namen (id) geben.

<a href="javascript:send();">Anmelden</a>

das Javascript:

function send(){
if (document.deinForumularName.IDdesInputFeldes.value.length > 0 &&
    document.deinForumularName.IDdesAnderenInput.value.length > 0){
          document.deinForumularName.submit();
}
}

[Struppi]

Hmmm, gut, aber wie kann ich feststellen, wieviele IDdesInputFeldes ich habe? Jedes Formular wird dynamisch erzeugt und hat unterschiedlich viele InputFelder(Text, Radio, ComboBox)

auch das ist ohne Probleme möglich steht alles in selfhtml.

Struppi.

[Nico]

Zähl doch die Anzahl der Felder mit PHP und lass sie dir von PHP in eine Javascriptvariable ausdrucken. Code:
<script type="text/javascript">
var felderzahl = <?php echo $felderzahl; ?>;
</script>
Und dann musste dir halt mit JS irgendwelche komischen Strukturen basteln, sodass du keine nicht-existenten Objekte abfragst. Also z. B.
if (felderzahl >= 5 && document.deinForumularName.inputID5.value.length == 0) {
  alert("Sie haben noch nicht alle Felder ausgefüllt.");
  return false;
} else if (...) {
  ...
}

[rfb]

Moin

Und dann musste dir halt mit JS irgendwelche komischen Strukturen basteln

nein, _komische Strukturen_ sind überflüssig, alle Formularelemente stehen im Objekt elements und können dort der Reihe nach abgefragt werden.

Gruß
rfb

[Nico]

Stimmt, das ist eleganter!
for (i = 0; i < felderzahl; i++) {
  if (document.forms[0].elements[i].value.length == 0) {
    alert("Bla, bla, bla!");
    return false;
    break; // Braucht man das noch, nach einem return false?
  }
}

[rfb]

Moin

du brauchst die Variable felderanzahl nicht, den Wert entnimmst du einfach dem elements-Object (elements.length)

alert("Bla, bla, bla!");
    return false;
    break; // Braucht man das noch, nach einem return false?

nö!

Gruß
rfb

[Joachim]

Hi,

bitte beachte mal wie hier zitiert wird, das ist lesbarer.

Hmmm, gut, aber wie kann ich feststellen, wieviele IDdesInputFeldes ich habe? Jedes Formular wird dynamisch erzeugt und hat unterschiedlich viele InputFelder(Text, Radio, ComboBox)

loope die Elemente und frage mit type ab, um welche input-variante es sich handelt. Beachte, Radios oder Optionen bilden ein Array.

Gruesse, Joachim

[Nico]

Grüße,

so kannst Du ganz normale Formularbuttons verwenden:

1. Du initiierst, sobald das Formular geladen wurde, einfach einen Event-Handler, der die Prüffunktion aufrufen soll. Z. B.:
document.getElementById("deineFormularID").onsubmit = pruefen;

2. Jetzt verwendest Du Kontrollstrukturen, wie sie sandra schon gepostet hat. Allerdings ein wenig anders:
function pruefen() {
if (document.deinForumularName.IDdesInputFeldes.value.length == 0 &&
  document.deinForumularName.IDdesAnderenInput.value.length == 0) {
  alert("Ihre Eingabe ist noch nicht vollständig.");
  return false; // Führt dazu, dass das Formular nicht abgeschickt wird.
} else {
  return true; // Das Formular wird ohne weitere Meldung abgeschickt.
}
}

Viel Spaß beim Basteln!

Nico

[Mathias Brodala]

Hallo Nico.

1. Du initiierst, sobald das Formular geladen wurde, einfach einen Event-Handler, der die Prüffunktion aufrufen soll. Z. B.:
   document.getElementById("deineFormularID").onsubmit = pruefen;

2. Jetzt verwendest Du Kontrollstrukturen, wie sie sandra schon gepostet hat. Allerdings ein wenig anders:

Kleiner Tipp dazu:

function pruefen() {
if (document.deinForumularName.IDdesInputFeldes.value.length == 0 &&
  document.deinForumularName.IDdesAnderenInput.value.length == 0) {

Du holst hier unnötigerweise zweimal eine Referenz auf das Formular, obwohl dir diese bereit mit „this“ zur Verfügung steht, da die Funktion „pruefen“ im Kontext des Formularobjektes ausgeführt wird.

Zudem nützt „IDdesInputFeldes“ hier garnichts, da nicht die ID sondern der Name für diese Zugriffsmethode relevant ist. Alternativ gibt es natürlich noch immer die http://de.selfhtml.org/javascript/objekte/elements.htm@title=elements-Nodelist.

Zusammengefasst also:

function pruefen() {  
  
  if (this.elements[0].value.length == 0 &&  
      this.elements[1].value.length == 0) {  
  
    alert("Fehlerhafte Eingabe.");  
    return false;  
  }  
  
  return true;  
}

Einen schönen Mittwoch noch.

Gruß, Mathias

[Joachim]

Hi,

Du darfst keinen Submit-Button ins Formular schreiben,

nein Sandra, Du musst onsubmit lediglich ein false zurückliefern, um die Standardreaktion des Submitbuttons zu unterbinden.

Gruesse, Joachim