Elemente nacheinander prüfen

[Carrear]

Hi Leute,

auf ein .submit() event möchte ich alle Input Felder eines Formulares überprüfen. Die eingegebene Zahl soll nämlich mindestens so groß sein wie der größere Wert der zwei data Attribut. Kurz am Beispiel:

<input data-eins="20" data-zwei="40" type="text" />
<input data-eins="70" data-zwei="70" type="text" />

Es soll also am Ende nur möglich sein in dem ersten Feld eine Zahl >=40 einzutragen (weil 40 die größere der beiden Zahlen ist) und im zweiten Feld eine Zahl >=70

Gibt der User eine kleinere Zahl in eines der beiden Felder ein, soll das betroffene Feld einfach als Feedback einen roten Rahmen bekommen und das Formular soll nicht abgeschickt werden. Liegen alle Eingaben über den jeweiligen Attributen soll das Formular eben abgeschickt werden.

Was ich habe ist das hier:

<script type="text/javascript">
$(document).ready(function() {
    $('form').submit(function() {
        var inputFeld;
        var ersteGroesse;
        var zweiteGroesse;
        var valueGroesse;
        inputFeld = $(this).children("input");
        ersteGroesse = $(this).children("input").data("bund");
        zweiteGroesse = $(this).children("input").data("mindest");
        valueGroesse = $(this).children("input").value();
        if(ersteGroesse > zweiteGroesse){
            if(valueGroesse < ersteGroesse){ return false; $(inputFeld).css('border-color','red'); }
        } elseif(zweiteGroesse > ersteGroesse){
            if(valueGroesse < zweiteGroesse){ return false;$(inputFeld).css('border-color','red'); }
        } elseif(zweiteGroesse = ersteGroesse) {
            if(valueGroesse < zweiteGroesse){ return false;$(inputFeld).css('border-color','red'); }
        } else {
            $(this).submit();
        }
    });
});
</script>

Ist das richtig? In meiner Logik klappt es irgendwie nicht, aber ich weiß nicht wie ich so eine Art Schleife machen kann um jedes Feld einzeln zu prüfen.

Okay, ich habe jetzt immerhin schonmal ein bisschen was über die .each() anweisung herausgefunden ^^ aber irgendwie funktioniert es nicht mal rudimentär. Folgenden Code habe ich jetzt:

$(document).ready(function() {
	$('#submit').click(function() {
		$('#form>input').each(function() {
			var bundGroesse;
			var mindestGroesse;
			var valueGroesse;

			bundGroesse = $(this).attr("data-bund");
			mindestGroesse = $(this).attr("data-mindest");
			valueGroesse = $(this).val();

			alert('hallo' + bundGroesse + ' ' + mindestGroesse + ' ' + valueGroesse);

		});
	});
});

Aber bei Klick wird nichts ausgegeben.

 

[para_noid]

Moin,

$('#form>input').each(function() {

Würd ich so nicht stehen lassen, da du ja mindestens noch ein drittes Input zum Absenden verwendest.
Da man mit jQuery die gleichen Selektoren wie in CSS verwenden kann, würd ich das entweder auf den Typ text oder auf eine Klasse beschränken, die nur die beiden Eingabefelder haben.

$('#form>input[type=text]').each(function() {

Ich erhalte mit deinem zweiten Code übrigens ein Alert. Vielleicht fehlt bei dir etwas im Markup, worauf du mit JS zugreifen willst.

jsfiddle hier wird nur einer der beiden Werte ausgelesen und als Mindestwert verwendet, aber vielleicht hilft das erstmal.
Ich würde dir aber empfehlen, keine eigenen Attribute in HTML zu verwenden. Valide ist das nämlich nicht. Vielleicht stattdessen die Werte in hidden-inputs setzen oder sowas.

Zudem würd ich

   $('form').submit(function() {

bevorzugen, da Formulare auch gerne mal mit der Enter-Taste abgesendet werden. Das Submit-Event des Formulars feuert dann auch; das Click-Event des Submitbuttons aber nicht.

Noch 'n paar Hinweise zum Debuggen:

• Developer-Erweiterungen der Browser verwenden (für Firefox z.B. Firebug). Für den Fall, dass javascriptmäßig irgendwie gar nichts funktioniert, lohnt sich hier ein Blick in die Meldungen, die die Konsole evtl. ausgibt (dann hättest du bei deinem ersten Code gleich einen Syntaxfehler mitbekommen, weswegen der komplette Code nicht ausgeführt wird).
• Wenn man Logikfehler sucht, ruhig mal ein paar alerts oder console.logs nach einem if, else oder in einer Schleife setzen. Dann sieht man recht schnell welche Bedingungen wirklich der Fall sind.
• Wenn es komplexer wird: Haltepunkte im JS-Code setzen und mit Punkt eins abprüfen. Hiermit kannst du Schritt für Schritt durch deinen Code gehen, so, wie er gerade live ausgeführt wird, und dir je nach Wunsch Inhalte von Variablen etc. anzeigen lassen.