"return false" funktioniert nicht

[ElementZ]

Hallo und einen schönen guten Abend,

ich arbeite in meiner Freizeit für eine Bekannte an einer Website. Diese Website soll eine Kontaktseite haben, auf der die Besucher eine Buchungsanfrage stellen können. Bis jetzt nicht allzu schwer. Ich habe natürlich in der Auswertungsdatei eine Kontrolle, ob alle Pflichtfelder gefüllt worden sind. Da man dafür aber ja erst weitergeleitet werden muss, habe ich mir schon für vorher eine Lösung in Javascript zusammengebastelt. Da ich natürlich, wenn ein Feld leer ist, die Standardaktion des Browsers abbrechen muss, arbeite ich da mit "return". Ich rufe meine Funktion mit "return check()" auf und gebe dann innerhalb der Funktion mit "return false" dem Browser bekannt, dass er seine Standardaktion unterdrücken soll.
Nur tut er das nicht. Egal welchen Browser ich benutze, man wird immer auf die nächste Seite weitergeleitet. Mein Script funktioniert im Dreamweaver, der ja den Links generell nicht folgt, aber problemlos.

Hier mein HTML:

<form method="post" action="auswertung.php" name="testform">
            <fieldset><legend>Buchungsanfrage senden</legend>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" class="text">
                <label for="vorname">Vorname:</label>
                <input type="text" id="vorname" name="vorname" class="text">
                <label for="mail">E-Mail:</label>
                <input type="email" id="mail" name="mail" class="text">
                <p>Buchungszeitraum:</p>
                <label for="ankunft">Ankunft:</label>
                <input type="date" id="ankunft" name="ankunft" class="text">
                <label for="abfahrt">Abfahrt:</label>
                <input type="date" id="abfahrt" name="abfahrt" class="text">
                <p>Mitteilung: (optional)</p>
                <textarea id="nachricht"></textarea>
            </fieldset>
            <fieldset style="margin-top:20px;"><legend>Telefonservice</legend>
                <label for="telefon">Telefonnummer: (optional)</label>
                <input type="tel" id="telefon" name="telefon" class="text">
            </fieldset>
                <input type="submit" id="submit" value="Senden" onsubmit="return check();">
        </form>

und hier mein Javascript dazu:

var skip = false;
var ausnahmen = new Array("telefon", "nachricht"); 
function check() {
    var a = document.forms[0].length;
    for(i=document.forms[0].length-1; i>=0; i--) {
    a = (document.forms[0].elements[i].type == "submit") ? a-1 : a;
    }
    for(i=a-1; i >= 0; i--) {
                for(b=0; b < ausnahmen.length; b++) {
                    if(document.forms[0].elements[i].id == ausnahmen[b]) {
                        skip = true;  
                    }
                }
                if(skip == false && document.forms[0].elements[i].value.length == 0) {
                    return false;
                    document.forms[0].elements[i].focus();
                    document.forms[0].elements[i].style.border = "1px solid red";
                } else {
                    skip = false;
                    continue;
                }
    }
}

Ich wäre euch sehr dankbar, wenn Ihr mir da helfen könntet

Einen schönen Abend noch !

 

[Duddle]

AW: "return false" funktioniert nicht

Der onsubmit-Handler muss dem <form>-Tag zugewiesen werden, nicht dem <input>. Die restlichen Fehler solltest du per FireBug / Fehlerkonsole finden.

Ansonsten musst du das Rad nicht neu erfinden: http://jqueryvalidation.org/


Duddle

 

[ElementZ]

AW: "return false" funktioniert nicht

Oh hey,
ja das mit dem form weiß ich eigentlich, hatte ich vorher auch so, aber da hat es ebenfalls nicht funktioniert, deswegen wollte ich es so nochmal probieren.

Natürlich muss ich das nicht, aber ich bin ja experimentierfreudig

Und ja, ich werde mich mal in der Fehlerkonsole umschauen.

Danke dir

Edit:
Habe es jetzt überarbeitet, jetzt funktioniert gar nichts mehr
Ich guck nochmal.

 

[ElementZ]

AW: "return false" funktioniert nicht

So,
laut Firebug ist der Teil:

if(skip == false && document.forms[0].elements[i].value.length == 0)

undefined. Also "document.forms[0].elements.value.length".

Kann man Schleifen nicht in Schleifen packen. Also kann das sein, dass das den Fehler verursacht und es deswegen für das Skript in dem Fall die Variable "i" nicht mehr gibt und deswegen kein element genommen wird?

Anders kann ich mir das nicht erklären.

Oder kann das an etwas anderem liegen?

 

[Duddle]

AW: "return false" funktioniert nicht

Wenn etwas wie

document.forms[0].elements[i].value.length

undefined ist, musst du dich zurück hangeln. Also: ist

document.forms[0].elements[i].value

definiert? Ist

document.forms[0].elements[i]

definiert? Und so weiter. Dann schaust du tiefer: welches i verursacht es (falls es daran liegt), welches Element steckt dahinter.


Duddle

 

[ElementZ]

AW: "return false" funktioniert nicht

"Value" ist undefined. Wenn ich aber das Teil per alert ausgebe, bekomme ich das richtige übergeben. Also wenn ich für "i" im index für elements meinetwegen eine 1 einsetze. Bedeutet doch eigentlich, dass am i liegen muss. Mich wundert nur, was da falsch ist.

 

[Duddle]

AW: "return false" funktioniert nicht

value ist dann undefined, wenn das damit verbundene Objekt dieses Attribut nicht hat. Du lässt dir also das falsche ausgeben oder das richtige falsch ausgeben. Ich weiss ja schon, welches Element das undefined erzeugt.

Wie sieht dein Code mittlerweile aus?


Duddle

 

[afr0kalypse]

AW: "return false" funktioniert nicht

Basierend auf dem aktuellen Code und der Fehlermeldung noch ein Tipp:
Du hast 10 Elemente in deinem Formular. Jedes Fieldset wird als eigenes Element behandelt.

 

[ElementZ]

AW: "return false" funktioniert nicht

Hallo,
habe mir gerade einfach mal über

for(i=0; i < document.forms[0].elements.length; i++) {
        alert(document.forms[0].elements[i].tagName);
    }

die Tagnamen auswerfen lassen. Dabei hat er alle label-tags und legends und fieldsets ignoriert, was mich darauf schließen lässt, dass ich da gar nicht drauf achten muss... Aber warum tut er das?

@afr0kalypse: Was meinst du damit?
Dass ich auf das erste Fieldset mit "document.forms[0].elements[0]" und auf das zweite mit dann eben 1 in elements zugreifen kann?
Wie soll ich dann auf die Kindelemente in den fieldsets zugreifen?

Edit: Achja, ich habe den Code jetzt wieder so wie am Anfang, weil ich nach meinen letzten Basteleien den Überblick verloren hatte

Nachtrag: Wenn ich mir die Elternelemente anzeigen lasse steht da "object HTMLBodyElement". Müsste mir da nicht "form" oder "fieldset" angezeigt werden?

 

[Duddle]

AW: "return false" funktioniert nicht

Dabei hat er alle label-tags und legends und fieldsets ignoriert

Unter welchem Browser testest du das? Im aktuellen Firefox und Chrome und Internet Explorer werden mir alle Elemente ausgegeben.


Duddle

 

[ElementZ]

AW: "return false" funktioniert nicht

Ich habe dafür die vorschau von Dreamweaver benutzt, der die Engine von Safari verwendet hat. Das ist alles etwas verwirrend, bei selfhtml steht nämlich, dass nur eingabeelemente gezählt werden, wenn die Browser da unterschiedlich agieren, ist das natürlich ziemlich doof.

Dazu kommt, dass ich momentan, wenn ich einfach mal:

alert(document.forms[0].elements.length);

ausführe, die Fehlermeldung bekomme, dass document.forms[0] undefined ist.
Warum das denn bitte?

Ich bin ganz eindeutig verwirrt.

 

[Duddle]

AW: "return false" funktioniert nicht

Okay, dann kann ich es nicht lokal nachvollziehen. Schau dir bei Gelegenheit mal Firebug für Firefox oder die eingebauten Entwicklertools vom FF bzw. Chrome an.

Deren Möglichkeiten gehen weit über ein alert() hinaus, aber anfangen kannst du mit console.log(). Bau das temporär statt der alerts ein, öffne die Seite im FF und starte Firebug. Dann hast du links das Konsole-Tab, in dem die Ausgaben von console.log() erscheinen. Vorteil davon ist, dass du die Objekte bekommst, d.h. du kannst sie genauer untersuchen, ihre Position im HTML nachvollziehen usw.

Der Fehler ist jedenfalls das/jedes <fieldset>, welches kein value-Attribut hat und daher ein undefined wirft.


Duddle

 

[ElementZ]

AW: "return false" funktioniert nicht

Ah danke, werde ich mir auf jeden Fall mal anschauen und mein Script noch einmal grundlegend überarbeiten.

Vielen Dank

Nachtrag: Ich habe mein Skript jetzt überarbeitet und alles funktioniert so, wie ich es möchte. Hier mein Code:

function check() {
    var ausnahmen = new Array("telefon");
    var skip = false;
    var eingaben = document.getElementsByTagName('input');
    for(i = eingaben.length-1; i >= 0; i--) {
        if(eingaben[i].type != "submit" && eingaben[i].value.length == 0) {
            for(a = 0; a < ausnahmen.length; a++) {
                if(eingaben[i].type != ausnahmen[a]) {
                    eingaben[i].style.border = "1px solid red";
                    eingaben[i].focus();
                    skip = true;
                }
            }
        } else {
            continue;
        }
    }
    if(skip == true) { return false; }
}