JavaScript FormularCheck mit Farbänderung und focus()

F

floHate

Grünschnabel
:( Ich bin fertig mit den Nerven. Ich suche nun schon seit Stunden nach einer Lösung dennoch klappt nichts. Daher wende ich mich nun an euch :) Hoffe hier kann mir jemand helefn.

Ich habe ein Formular geschrieben:

PHP: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
 <title>Lovestory about YOU!</title>
 <meta name="generator" content="Scribe! 2 [http://scribe.de]" /> 
 <link rel="stylesheet" type="text/css" href="story.css" />
</head>

<body>
<h1>Lovestory about YOU! - Witzig, raffiniert und flexibel</h1>
<blockquote class="infobox1">Alle von dir Angegebene Daten werden <b>nicht</b> gespeichert oder an dritte weiter gegeben. Wenn jedoch gew&uuml;nscht wird das die Geschichte gespeichert wird m&uuml;ssen Sie das selber machen.</blockquote> 
<br />
<span>Schritt 1 - Angaben f&uuml;r die Geschichte</span>
<hr />
<form name="lovestory" action="view.php" method="post">
<fieldset>
<legend><b>Name:</b></legend>
<p><input type="text" name="name" size="20" maxlength="20" /></p>
<blockquote class="infobox2"><b>Info:</b> Bitte gebe hier deinen Namen an.<br /><b>Beispiel:</b> Vorname Nachname</blockquote>
<hr class="break" />
</fieldset>
<fieldset>
<legend><b>Alter:</b></legend>
<p><input type="text" name="alter" size="2" maxlength="2" /></p>
<blockquote class="infobox2"><b>Info:</b> Bitte gebe hier dein Alter an.<br /><b>Beispiel:</b> 25</blockquote>  
<hr class="break" /> 
</fieldset> 
<fieldset>
<legend><b>Geschlecht:</b></legend>
<p><input type="radio" value="male" name="gender" />Männlich <input type="radio" value="female" name="gender" />Weiblich</p>
<blockquote class="infobox2"><b>Info:</b> Bitte gebe hier dein Geschlecht an.</blockquote>
<hr class="break" /> 
</fieldset>
//Habe das Formular gekürzt!... is ja immer das selbe ;)
<fieldset> 
<legend><b>1. Temporaladverb:</b></legend>
<p><input type="text" name="adverb1" size="25" maxlength="30" /></p>
<blockquote class="infobox2"><b>Info:</b> Bitte gebe hier ein Temporaladverb an.<br /><b>Beispiel:</b> heute</blockquote>
<hr class="break" /> 
</fieldset>
<fieldset> 
<legend><b>2. Temporaladverb:</b></legend>
<p><input type="text" name="adverb2" size="25" maxlength="30" /></p>
<blockquote class="infobox2"><b>Info:</b> Bitte gebe hier ein Temporaladverb an.<br /><b>Beispiel:</b> sp&auml;ter</blockquote>
<hr class="break" /> 
</fieldset>
<fieldset> 
<legend><b>3. Temporaladverb:</b></legend>
<p><input type="text" name="adverb3" size="25" maxlength="30" /></p>
<blockquote class="infobox2"><b>Info:</b> Bitte gebe hier ein Temporaladverb an.<br /><b>Beispiel:</b> damals</blockquote>
<hr class="break" /> 
</fieldset>
<hr />
<input type="submit" value="Submit!" /> <input type="reset" value="Reset!" />
<hr />
</form>
</body>
</html>

Nun möchte ich die Felder auf die priimitivste art und weise Prüfen. Sprich ob etwas darin steht oder nicht. Mehr will und brauch ich nicht.

Wenn ich auf Submit gehe und ein oder mehere Felder nicht ausgefüllt sind dann sollen diese Rot hinterlegt sein und die "Überschrift" des Eingabefeldes soll ebenfalls Rot werden. Nur wie?

Ich hab sämtliche Formchecks ausprobiert jedoch nie ein erbegnis erzielt. Entweder sie wurden nicht Rot, es wurde nicht Überprüft oder es kamen nur Fehler.

Ich hab von JavaScript so gut wie keine Ahnung und kann nur mit meinem PHP und HTML/CSS wissen trumpfen daher wäre ich euch sehr verbunden wenn mir jemand helfen kann und mir einen Lösungsvorschlag schreiben kann.

Bei Fragen stehe ich gerne Rede und Antwort!

Mfg floH
 
:) Danke.

Ich habe das natülich auch schon gesehe und verscht in mein Formular einzubinden aber es geht nicht. Ich weis nicht wo der fehler liegt.

Ich hab mir gedacht das es evt. an dem <fieldset> liegt aber bin mir da nicht sicher. Wie gesagt JavaScript ist für mich Neuland und ich steig da noch nicht so ganz durch :)

Mfg floH
 
Hi,
wenn du PHP kannst, mach es doch mit PHP. Ich habe es auch mit PHP gelöst. Was wär denn, wenn jemand Javascript deaktiviert hat?

schiese
 
:p Ist klar auch eine Möglichkeit.

Ich prüfe das ganze auch noch mit PHP. Jedoch gebe ich nur eine Fehlermeldung aus mit der Anzahl der fehlenden Felder und leite wieder zurück zum Formular, ohne etwas zu makieren.

Ich hab mir gedacht da ich eh nur Prüfen will ob es leer ist oder etwas geschrieben ist mach ich das gleich mit JavaScript. Das kostet dem Benutzer am wenigsten Zeit und durch die Makierung weis er gleich wo etwas fehlt und kann handeln. Ich habe versucht den JavaScript fetzen von oben zu verwenden denn das is einfach und Simpel hab ich mir gedacht. Jedoch wenn ich das in mein Formular einbauen will tut sich da nichts. Ich möchte eine externe *.js Datei und diese binde ich im Header ein. Dann gebe ich im Formular an mit onsubmit das er die JavaScript funktion durchgehen soll.

Mein Problem ist das er das nicht macht. Bzw ich noch nicht ganz dahintergestiegen bin was das Script macht. Folgendes kann ich mir erklären und verstehe ich soweit:

PHP: 
formValidating = function(form) {   //Hier "erstelle" ich die Funktion
        var validateForm = document.getElementById(form); //Hier bin ich mir nicht sicher aber sieht mir nach einer Variable aus. Was genau darin steht weis ich nicht :)
        for(var i = 0; i < validateForm.length; i++) { //Hier arbeite ich die Elemente des Formulars ab`?
            var e = validateForm.elements[i];//Hier wieder eine Variable?
            if(e.type != 'submit' && e.value.length <= 3) { //Hier wird überprüft ob das Inputfeld mehr als 3 Zeichen hat ansonsten fehler           
                e.style.backgroundColor = "#ff0000";    //Die Hintergrundfarbe des elements
                e.previousSibling.style.color = "#ff0000";    //Schriftfarbe
                var noGo = true;            //Fehler return = false Formular wird nicht versendet
            } else if(e.type != 'submit' && e.value.length >= 3) { //Wenn allet passt dann gehts weiter
                e.style.backgroundColor = "";//nothing
                e.previousSibling.style.color = "";//nothing
            }
        }
        if(noGo) {
            return false;//return false is denke ich klar ;)
        }
    }


So bei mir möchte ich Inputfelder Checken und Radiobuttons. Nur darauf ob etwas darin steht bzw sie angeklickt sind und einen Wert übergeben. Ansonsten falls dies nicht ist möchte ich die <legend>Name:</legend> in Rot haben und das Eingabefeld selber mit Roter Hintergrundfarbe und einen focus() auf das erste Feld das nicht ausgefüllt ist.

Mfg flohate
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück