03.27
Ich hatte grade mal wieder etwas langeweile und wollte daher bei einem Projekt eine neue Funktion mit einbauen, die das Absenden eines Formulares verhindert, wenn in diesem nicht alle Felder die mit einem * gekennzeichnet sind ausgefüllt sind. Natürlich geht das ganze nur wenn Javascript eingeschaltet ist, aber das PHP Skript, hat ja eh noch einen Abfrage ob die Daten auch das richtige Format haben.
Natürlich könnte man für jedes Formular eine eigene Javascript Datei schreiben, in welcher man jedes Formularfeld prüfen lässt, welches Ausgefüllt werden muss. Da mir das aber zu viel Arbeit ist, habe ich mir gedacht ich lese einfach mittels Javascript alle <label> Felder aus, welche in ihrem Text ein * besitzen.
Das ganze habe ich mit dem Javascript Framework JQuery realisiert.
Erst einmal ein Beispiel Formular:
<form method="post">
<label for="vorname">Vorname *</label>
<input type="text" name="vorname" /><br/>
<label for="nachname">Nachname</label>
<input type="text" name="nachname" /><br/>
<label for="gebDatum">Geburtsdatum *</label>
<input type="text" name="gebDatum" /><br/>
<input type="submit" name="submit" value="Absenden" />
</form>
In diesem Formular sollen also der Vorname und das Geburtsdatum angegeben werden. Um zu überprüfen ob diese Daten wirklich eingetragen wurden, benötigen wir nun noch ein kleines Javascript. (Achtung: JQuery muss natürlich schon eingebunden sein)
<script type="text/javascript">
$('input[type="submit"]').click(function() //Ausgeführt wenn submit-Button gedrückt
{
var error = false;
var form = $('form').children($(this)); //Suchen des Formulars
var label = $(form).find('label:contains("*")'); //Finden der Label-Felder mit einem *
$(label).each(function(index)
{
var name = $(this).attr('for'); //Suche Namen für input-Feld
if($('input[name='+name+']').val() == "") //Wenn input-Feld leer
{
error = true;
$('input[name='+name+']').addClass('inputError'); //Hinzufügen von CSS-Klasse
}
});
if(error == true)
{ //Nicht alle Felder ausgefüllt
return false;
}
else
{
return true;
}
});
</script>
Mit diesem kleinen, aber meiner Meinung nach sehr hilfreichen Codeschnipsel kann man sich einiges an Arbeit sparen und dem User einiges an Wartezeit, da die Seite ja nicht erst neu geladen werden muss, bevor er angezeigt bekommt, das er einen Fehler gemacht hat.
Bestimmt kann man an diesem Skript noch viel verbessern, aber es erfüllt erst einmal Sinn und Zweck. Wenn jemand noch einen besseren Vorschlag hat, dann wäre ich dankbar diesen zu bekommen.
[Leider will WordPress den Code nicht so schön speichern wie er ursprünglich war 
Ich hoffe ihr könnt ihn trotzdem lesen]
)
