Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: BASE4U. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Grizzly

Administrator

  • »Grizzly« ist der Autor dieses Themas

Beiträge: 6 683

Aktivitätspunkte: 36 100

Wohnort: Lichtenau

Beruf: Anwendungsentwickler

  • Nachricht senden

1

Mittwoch, 24. November 2010, 22:14

Pflichtfelder überprüfen mit JavaScript bzw. JQuery

Hi @ all,

vor einigen Tagen, stand ich vor dem Problem, dass ich vor dem Absenden eines Formulars an den Server (An eine PHP-Datei) Client-Seitig überprüfen wollte, ob alle Pflichtfelder auch wirklich ausgefüllt worden sind. Deshalb habe ich mir eine JavaScript-Funktion geschrieben die genau das macht. Da ich in meinem Projekt eh JQuery verwendet habe, habe ich es auch benutzt, da es einfach schneller und leichter geht bestimmte Elemente anzusprechen.

Also erst mal zur JavaScript Funktion

Javascript-Quelltext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">

function CheckAllRequiredInputs()
{
var requiredInput = $(".required"); //Hole alle Elemente die die CSS-Klasse "required" haben
var NoError = true; //Variabel für den Rückgabewert bei True werden Daten an Server geschickt, bei False nicht
for(var i=0; i<requiredInput.length; i++) //Alle Elemente Durchlaufen
{
if(requiredInput[i].value == "") //Standard JS: Ist das momentane Element (requiredInput[i]) leer also =="" 
{
                       //Zeige das Element mit der ID "error" wo dann steht "Bitte alle Felder ausfüllen"
$("#error").show();
requiredInput[i].style.border = "1px solid red"; //Dem Element welches nicht ausgefüllt ist einen Roten Rand geben
NoError = false; //Variabel NoError auf False setzen, um Serveranfrage zu vermeiden ==> Kein Seitenrefresh

}
else //Wenn alles ausgefüllt
{
if(NoError)
$("#error").hide(); //Element mit der ID "error" ausblenden

requiredInput[i].removeAttribute("style"); //Roten rand entfernen
}
}

return NoError;
}
</script>


HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="index.php" id="B4UCodeschnipsel" method="post">
<div class="b4u-details">

<span id="error" style="display: none">Bitte alle Felder ausf&uuml;llen</span>
<input type="text" size="30" name="b4u" value="" class="required"/>
<input type="text" size="30" name="b4u-code" value="" class="required"/><br/>
<input type="text" size="30" name="base4u" value="" class="required"/><br/>
<input type="text" size="30" name="base4u4ever" value="" class="required"/><br/>
<input type="text" size="30" name="KeinPflichtFeld" value=""/><br/>
<input type="text" size="30" name="AuchNichtPflicht" value=""/><br/>
<input type="submit" size="30" name="submit" onClick="return CheckAllRequiredInputs();" value="Felder Prüfen"/>
</div>
</form>


Das bedeutet, dass die letzten zwei INPUT-Elemente, die die Klasse required nicht haben, nicht berücksichtigt werden. Also können Diese freigelassen werden (nicht ausgeüllt werden, da ja nicht Pflicht).

HTML

1
<input type="submit" size="30" name="submit" onClick="return CheckAllRequiredInputs();" value="Felder Prüfen"/>


Dieses onClick-Event nimmt genau den NoError Wert auf und macht weiter, wenn False, dass passiert im Prinzip nichts, wenn True dann werden alle Daten an die index.php Datei, also an den Server geschickt.

Und nicht vergessen, ich habe JQuery verwendet, doch JQuery für eine einzige Seite muss nicht unbedingt sein. JQuery ist zwar sehr mächtig, allerdings auch sehr groß, und für so eine kleinigkeit muss das nicht unbedingt sein, deshalb habe ich die Funktion in reines JavaScript umgeschrieben, extra für B4U

Javascript-Quelltext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function CheckAllRequiredInputs()
{
var allElements = document.getElementsByTagName('*');
var error = document.getElementById('error');
var NoError; 
for (var i = 0; i < allElements.length; i++) 
{
var thisElem = allElements[i];
if (thisElem.className && thisElem.className == 'required') 
{
if(thisElem.value == "")
{
error.style.display = "inline";
thisElem.style.border = "1px solid red"; 
NoError = false; 
}
else
{
error.style.display = "none";
thisElem.removeAttribute("style"); 
NoError = true; 
}

}
}

return NoError;
}


Der Rest bleibt gleich :)

PS: Wenn kopiert wird, bitte die Kommentare entfernen, da es zu Problem kommen könnte :)

2

Donnerstag, 27. Januar 2011, 22:28

Kleiner Fehler!!

Ich hoffe du antwortest auf diesen Beitrag noch :)

Also dein Script ist sehr schön, hat allerdings einen kleinen Fehler. Wenn ich beim letzten benötigten Feld etwas eintrage, dann boxt er das durch, obwohl alle anderen noch leer sind. Evtl hast du ja ne Lösung dafür

Peace und lange Haare

3

Donnerstag, 27. Januar 2011, 23:02

Lösung für mein voheriges Problem

Nun hab ichs, nach Stundenlangem Basteln und schon einer Frage hier, obs eine Lösung gibt. Manchmal sollte man einfach 5 minuten pause machen...

Also ich hab einfach eine function hinzugefügt, die erst die klasse required entfernt, NoError wieder auf false setzt und die Klasse required dann wieder dazupackt. Weiß nicht, obs konform ist, aber es funktioniert :)


Javascript-Quelltext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
function CheckAllRequiredInputs() {
var requiredInput = $(".required");
var NoError;
for (var i=0; i<requiredInput.length; i++) {
if (!requiredInput.value) {
requiredInput.style.border = "2px ridge #F00";
NoError = false;
} else {
requiredInput.removeAttribute("style");
NoError = true;
$(function() {
$(requiredInput).removeClass("required");
NoError = false;
$(requiredInput).addClass("required");
});
}
}
return NoError;
}



Und nochmal Peace und lange Haare

4

Freitag, 28. Januar 2011, 06:01

schwachsinn :)

So noch einmal. Das was ich vorher geschrieben hatte ist natürlich schwachsinn. Man sollte auch zuende testen :)

Aber nun habe ich eine Lösung die wirklich funktioniert und bis zum erbrechen getestet wurde von mir. Habe einfach einen Zähler eingefügt...

Javascript-Quelltext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
  function CheckAllRequiredInputs() {
	  var requiredInput = $(".required");
		var NoError;
		var z=0;
    for (var i=0; i<requiredInput.length; i++) {
			if (!requiredInput.value) {
			  requiredInput.style.border = "2px ridge #F00";
        NoError = false;
        z++;
      } else {
			  requiredInput.removeAttribute("style");
			  z--;
        if (z<=0) {
          NoError = true;
        }
			}
    }
    return NoError;
  }
</script>

Grizzly

Administrator

  • »Grizzly« ist der Autor dieses Themas

Beiträge: 6 683

Aktivitätspunkte: 36 100

Wohnort: Lichtenau

Beruf: Anwendungsentwickler

  • Nachricht senden

5

Freitag, 28. Januar 2011, 07:43

Hi, Danke für den Fehlerbericht, jedoch müsstest du es nicht einmal so kompliziert machen, Mein Fehler war mir vorher nicht aufgefallen.

Du müsstest beim Definieren der Varible "NoError" einfach gleich einen Wert zuweisen (in dem fall True).

Also sprich die Zeile

Javascript-Quelltext

1
var NoError; //Variabel für den Rückgabewert bei True werden Daten an Server geschickt, bei False nicht


durch diese Zeile ersetzen:

Javascript-Quelltext

1
var NoError = true; //Variabel für den Rückgabewert bei True werden Daten an Server geschickt, bei False nicht


und dafür im Else zweig diese Zeile löschen:

Javascript-Quelltext

1
NoError = true; //Variable NoError auf True setzen, damit Daten an Server geschickt werden ==> Seitenrefresh


Also sprich, dass das rauskommt:

Javascript-Quelltext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script type="text/javascript">

function CheckAllRequiredInputs()
{
var requiredInput = $(".required"); //Hole alle Elemente die die CSS-Klasse "required" haben
var NoError = true; //Variabel für den Rückgabewert bei True werden Daten an Server geschickt, bei False nicht
for(var i=0; i<requiredInput.length; i++) //Alle Elemente Durchlaufen
{
if(requiredInput[i].value == "") //Standard JS: Ist das momentane Element (requiredInput[i]) leer also =="" 
{
                       //Zeige das Element mit der ID "error" wo dann steht "Bitte alle Felder ausfüllen"
$("#error").show();
requiredInput[i].style.border = "1px solid red"; //Dem Element welches nicht ausgefüllt ist einen Roten Rand geben
NoError = false; //Variabel NoError auf False setzen, um Serveranfrage zu vermeiden ==> Kein Seitenrefresh

}
else //Wenn alles ausgefüllt
{
$("#error").hide(); //Element mit der ID "error" ausblenden
requiredInput[i].removeAttribute("style"); //Roten rand entfernen
}
}

return NoError;
}
</script>