Pflichtfelder überprüfen mit JavaScript bzw. JQuery

Grizzly

Administrator

Beiträge: 6 460

Aktivitätspunkte: 34 945

Wohnort: Dinkelsbühl City

Beruf: Anwendungsentwickler

720

1

Mittwoch, 24. November 2010, 22:14

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

<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

<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

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

.:: Base4u auf Facebook ::.

.:: B4U Twitter ::.

b0bf0x

unregistriert

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

b0bf0x

unregistriert

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

<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

b0bf0x

unregistriert

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

<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

Beiträge: 6 460

Aktivitätspunkte: 34 945

Wohnort: Dinkelsbühl City

Beruf: Anwendungsentwickler

720

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

<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>