Archivlink: javarea.de Forum > JavaScript > Hilfe zu verschiedene Formularfeldarten mit Javascript überprüfen
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Hilfe zu verschiedene Formularfeldarten mit Javascript überprüfen

Pages: [1] 2 ... nächste » ... Letzte »
geschrieben von nicole.g am 17.12.2009 - 14:29
Hallo!


Ich bin Neuling in Sachen Java Script Programmierung und benötige dringend Hilfe, wie ich mein bestehendes Formular dahingehend überprüfen kann, dass in alle Texteingabefelder etwas rein geschrieben wurd, bei den radio-Buttos eine Auswahl getroffen wurde und auch bei den Drop-Down Feldern etwas ausgewählt wurde.

Ich habe schon mehrer Versuche gesartet das zu programmieren, alles hat nicht geklappt.
Könnte mir jemand von euch helfen, das Java Scrip zu erstellen?

Hier mein Formular:

HTML-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: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 

<form action="http://www.formular-chef.de/fc.cgi" method="post" enctype="multipart/form-data" onsubmit="return CheckInput()">                                            

              <div>
                   <p class="kontaktformularfrage">Sie sind</p>
                   <input name="geschlecht" type="radio" value="m" /> männlich<br />
                   <input name="geschlecht" type="radio" value="w" /> weiblich<br />
                   <p></p>

                   <p class="kontaktformularfrage">Wie sind sie auf meine Portfolio aufmerksam geworden?</p>
                   <p>
                   <select name="Aufmerksamkeit" size="1">
                   <option > zielloses surfen nach Portfolios von Designer </option>
                   <option> durch einen Tipp von Bekannten </option>
                   </select>
                   </p>


                   <p class="kontaktformularfrage">In welcher Branche sind sie tätig?</p>
                   <p>
                   <select name="Branche" size="1">
                   <option>Produktentwicklung</option>
                   <option>Produktdesign</option>
                   <option>Werbebranche</option>
                   <option>Webdesign</option>
                   <option>Printdesign</option>
                   <option>in einer damit nicht verwandten Branche</option>
                   </select>
                   </p>

                   <label for="alter" class="kontaktformularfrage"> 
                   Bitte geben Sie Ihr Alter ein! (Bitte eine Zahl eingeben!)</label>
                   <p></p>
                   <input type="text" id="alter" name="alter" />
                   <p></p>

                   <p class="kontaktformularfrage">Wie beurteilen Sie mein Portfolio?</p>
                   <input name="note" type="radio" value="sg" /> sehr gut<br />
                   <input name="note" type="radio" value="g" /> gut<br />
                   <input name="note" type="radio" value="s" /> schlecht<br />
                   <input name="note" type="radio" value="ss" /> sehr schlecht<br />
                   <p></p>
              </div>
                                                                                                                           
              <div>                                                                                                   
                   <label for="nachricht" class="kontaktformularfrage">Geben Sie hier Ihre Nachricht ein!</label>
                   <p></p>
                   <textarea id="nachricht" name="nachricht" cols="20" rows="5"></textarea>
              </div>

              <div>
                   <label for="absender" class="kontaktformularfrage">
                   Bitte geben Sie Ihre E-Mail-Adresse ein!</label>                                                      
                   <p></p>
                   <input type="text" id="absender" name="absender" />
                   <input type="hidden" name="empfaenger" value="xxxX§Xweb.de" />                                                
             </div>                            
                                                                            
              <div>                                                                                                                      
                    <input type="submit" value="Abschicken" />
              </div>                                                                                                   
          </form>

geschrieben von nicole.g am 17.12.2009 - 14:32
Und so habe ich bei der letzten Version angefangen das Java Script in den Head-Bereich zu schreiben:

PHP-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: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 

<?
<script type="text/javascript">

        /* <![CDATA[ */

           function CheckInput ()
           {

             if (document.forms[0].geschlecht[0].checked == true ) {}
             else if (document.forms[0].geschlecht[1].checked == true ) {}
             else {
             alert"Bitte wählen Sie aus, ob Sie männlich oder weiblich sind!");
                   }

             if (document.forms[0].absender.value="")
             {
             alert"Bitte geben Sie ihre EMail-Adresse ein!");
             document.forms[0].absender.focus();
             return false;
             }
             
              if (document.forms[0].nachricht.value="")
             {
             alert"Bitte geben Sie eine Nachricht ein!");
             document.forms[0].nachricht.focus();
             return false;
             }

            
           }

        /* ]]> */

</script>
?>

geschrieben von Micha am 17.12.2009 - 19:50
Hi,

im Anhang


Gruß Micha

geschrieben von nicole.g am 18.12.2009 - 09:36
Guten Morgen Micha!

Vielen lieben Dank für deine Mühe und investierte Zeit, den Code zu schreiben! Funktioniert alles prima, wie sollt es anders sein

Jetzt habe ich nur noch ein Anliegen oder besser zwei

Könntest du mir den Code weng erklären, sodass ich ihn verstehe, warum man was so uns so geschrieben hat, denn so kann ich das dann auch für andere Projekte anwenden...

Ich kannte nämlich bisher nur die wennn...dann formulierung...

Also ich verstehe nur die Überprüfung des Nachrichtentextfeldes, d.h. das kann ich nachvollziehen:

PHP-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

<?
// Nachricht
    if (this.elements['nachricht'].value == "") {
    window.alert("Bitte geben Sie noch eine Nachricht ein!");
    return false;
?>



-> Wenn der Wert value "" leer ist, man in die Textfelder also nichts geschrieben hat, kommt die "alert-Meldung" FRAGE: warum hast du davor noch window. geschrieben, die du ganz am schluss nochmal definiert hast?

Alles andere wie i++, break, iscomplete, isNaN ist für mich noch nicht so nah.

Wäre es möglich, dass du quasi die Programmierung des Codes in Worte fasst?

Vielen lieben Dank schonmal!!!

lieben Gruß

Nicole

geschrieben von nicole.g am 18.12.2009 - 09:37
Achso hab noch was vergessen, was ist denn, wenn der Benutzer mehr als eine Sache vergessen hat auszufüllen, anzuklicken etc.

Ist es dann möglich eine Fehlermeldung mit allen vergessenen Sachen zu generieren?

geschrieben von Micha am 18.12.2009 - 16:14
Hi,

ich geb Dir ein paar Links, wenn Du dann noch Fragen hast, stell sie:

++ Operator

break in einer Schleife

parseInt und isNaN

indexOf

Wenn Du die alle Fehler mit einmal ausgeben willst, musst Du sie in einem String "sammeln" und am Ende ausgeben.

Gruß Micha

geschrieben von nicole.g am 19.12.2009 - 12:43
Hey Micha,

also ich hab mir die Inhalte von den Links durchgelesen, aber ich steig einfach nicht dahinter, schon bevor ich meinen beitrag hier gepostet hab, hab ich mich auch durch selfhtml durchgelesen, aber ich verstehs so einfach nicht.

oh man... bin am verzweifeln grad, weil ich doch den code verstehen will...

geschrieben von nicole.g am 19.12.2009 - 12:47
da tauchen noch zusätzlich zu den links so viele fragen auf: warum hast du immer this.elements etc. geschrieben schareibt man da nicht immer document.forms[0].element. etc.?

und warum das ausrufezeichen z.b. bei !isComplete....

der ganze code ist noch wie eine fremdsprache für mich

geschrieben von Danny am 19.12.2009 - 13:39
Hallo Nicole,

ich werd mal versuchen ein wenig Licht ins dunkle zu bringen ;)

Nach dem Laden einer Seite wird die Funktion window.onload ausgeführt. Darin rufst du die Funktion checkForm auf und übergibst das zu prüfende Formular (hier: document.forms[0])

In der checkForm funktion wird ein onsubmit Event für das übergebene Formular definiert. Das heist sobald dein Formular abgeschickt wird, wird die Funktion aufgerufen. Wenn diese true zurückgibt werden die Formulardaten wie gewohnt an die im action="http://www.formular-chef.de/fc.cgi" Attribut stehende Adresse gesendet, andernfalls bei return false wird der Vorgang abgebrochen.

Innerhalb dieser Funktion kannst du mit this auf den "Besitzer" des Events zugreifen, hier allgemein der Parameter f aus checkInput(), bzw. in deinem Fall dein Formular was du der Funktion übergeben hast. Vorteil ist hier, dass du auch andere Formulare mit einer ähnlichen Struktur überprüfen könntest ohne die ganzen Sachen noch einmal schreiben zu müssen.

Das Ausrufezeichen in der if Anweisung steht für eine Negation folgendes ist also gleichbedeutend

(!isComplete) mit (!isComplete == true) mit (isComplete == false)


Hoffe das ich ein bisschen "übersetzen" konnte.

Gruß Danny

geschrieben von Micha am 19.12.2009 - 15:08
Hi,

Danny war ja schon so lieb und hat angefangen die Sache zu erhellen.

onload ist also eine Event - ein Ereignis. In diesem Fall: "wenn die Seite fertig geladen ist". Durch die Verwendung von onload kann der gezeigte Code vollständig in einer externen JS-Datei ausgelagert werden, da HTML und JS getrennt vorliegen.

Du musst es also wie folgt lesen: Wenn die Seite vollständig geladen ist, prüfe das erste Formular, welches Du finden kannst (document.forms[0]) mit der Funktion checkInput().

In der Funktion checkInput() heißt Dein Formular einfach f. Es ist eine Referenz auf Dein Formular also lediglich die Adresse. Vorteil ist, dass ich nicht immer im Dokument nach Deinem Formular suchen muss mit document.forms[0] sondern so schon weiß, wo es steht (ich merke es mir durch die Variable f). Das spart also lediglich Zeit (und sieht vll auch etwas schöner aus)

isComplete ist lediglich eine von mir definierte Hilfsvariable. Sie kann nur wahr oder falsch sein. Bezogen auf Dein Formular gibt sie für Teile an, ob diese ausgefüllt sind (wahr) oder eben nicht (falsch). In einer Bedingung prüfst Du immer auf wahr. Bspw:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 

var zahl = 3;
if (zahl == 3) // true
if (zahl != 3) // false
if (zahl == 5) // false
if (zahl != 5) // true


JavaScript macht somit aus dem Vergleich ein faslch/wahr Term. Somit kann man auch auf falsch oder wahr prüfen - siehe Dannys Hinweis

(!isComplete) ist (fast) das gleiche wie (isComplete==false), da das Ausrufezeichen als Verneinung zu lesen ist. Also konkret: ist isComplete nicht wahr oder eben anders formuliert: ist isComplete falsch.

i++ ist nichts anderes als i=i+1 in Kurzschreibweise

break beendet eine Schleife vorzeitig

Diese Schleife läuft 10mal durch
HTML-Quelltext
1: 

for (var i=0; i<10; i++) { }


aber diese nur einmal, weil break sie beendet
HTML-Quelltext
1: 

for (var i=0; i<10; i++) { break; }


In Deinem Fall muss geprüft werden, ob eine Note vergeben wurde. Ich durchlaufe in einer Schleife alle möglichen Noten und "suche" eine, die aktiviert wurde. Wenn ich eine gefunden habe, brauch ich nicht weiter suchen, da es keine weitere mehr geben kann. Ich breche die Schleife also ab, weil ich weiß, dass nichts mehr kommen kann. Das ich etwas gefunden habe, speichere ich temporär in isComplete. Am Ende der Schleife frage ich also, hast Du was gefunden und isComplete sagt mir ja oder nein.

parseInt erzeugt aus einer Zeichenkette eine Zahl; Du willst ja ein Alter. NaN heißt Not a Number. Mit isNaN kann man prüfen, ob eine Zahl eben keine Zahl ist

Das this hat Danny Dir schon erklärt. In JS ist das ein wenig blöd und man muss sich daran einfach gewöhnen. this ist also nichts anderes als document.forms[0].

Ich hoffe das hilft Dir weiter....

Micha

geschrieben von nicole.g am 19.12.2009 - 19:53
Hey ihr beiden!

Das war jetzt total klasse von euch !!!

Das hat mir den Durchblick gegeben. Ich habe für mich diesen Code nochmal in Worte gefasst und und dabei sind jetzt noch ein paar kleine Fragen aufgetreten:

1. Wie lautet denn die Überprüfungsfunktion von den Drop-Down-Felder (das für die Branchen-Auswahl und das für Beurteilungs-Auswahl), die ich in meinem Formular habe? Die wurden irgendwie übersehen.

2. Dass "//"-Zeichen heißt oder, oder?

3. Warum sind da zwei Anführungsstriche in der eckigen Klammer z.B. ['absender']?

4. Wie schreibt man nun einen String, in dem man alle Fehlermeldungen mit einmal ausgeben kann, d.h. wenn der Benutzer mehrere Felder nicht ausgefüllt hat?

5. Warum hat man bei der function(e) das e geschrieben. War das eine wahllose Bezeichnung?


so das war das, was mir noch nicht so klar ist.

wenn ihr mir das dann gesagt habt, schreib ich mal meine zusammenfassung hier, rein, wäre toll, wenn ihr da dann nochmal drüber lesen könntet, dass ich alles richtig interpretiert habe.

Und wie gesagt, wenn ich mir das immer so aufschreiben kann, fällt es mir leichter es später für anders anzuwenden.

Vielen Dank!

Nicole

geschrieben von Danny am 19.12.2009 - 20:33
Hallo Nicole,

deine erste Frage versteh ich nicht so recht. Wozu soll man bei einem Dropdown überprüfen ob es ausgefüllt wurde ? Die Felder haben doch immer eine Standardauswahl.

2. das // leitet einen einzeiligen Kommentar ein. du meinst sicher das || , da hast du Recht das ist ein ODER.

3. Das Formular referenziert über das Array elements ja seine Elemente. Dabei sind die Schlüssel des Arrays die Namen der Formularfelder. Deswegen stehen in da auch Strings.

4. Anstatt den Fehler immer mit alert() gleich auszugeben könntest du z.B. so vorgehen. Am Anfang (nach var isComplete = false; ) definierst du die leere Variable

HTML-Quelltext
1: 

errorMsg = "";


Bei jedem Check der fehlschlägt merkst du dir darin das fehlerhafte Feld. Natürlich darf die Funktion jetzt nicht mehr sofort false zurückgeben. Also in etwa so:

HTML-Quelltext
1: 
2: 
3: 

if (this.elements['nachricht'].value == "") {
    errorMsg += "Nachricht \n"; // hänge das fehlerhafte Feld an den bestehenden String ( += ) 
}


Am Ende der Checks überprüfst du ob etwas in errorMsg steht, wenn ja dann ist ein Fehler aufgetreten ansonsten ist alles ok.

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

if(errorMsg != "") {
    alert("Folgende Fehler enthalten einen Fehler: " + errorMsg);
    return false;
} else {
    return true;
}


5. Bei Events kann man der Funktion einen Parameter übergeben. Auf diesen wird dann das Eventobjekt referenziert. Darin stehen dann Informationen wie "Typ des Events", "Wo ist es aufgetreten" etc.
Nennen kann man den Parameter also wie man will. Wenn man auf das Eventobjekt zugreifen möchte, muss man dann halt die jeweilige Bezeichnung auch verwenden.

Gruß Danny

geschrieben von Micha am 19.12.2009 - 20:41
Hi,

Zitat
 1. Wie lautet denn die Überprüfungsfunktion von den Drop-Down-Felder (das für die Branchen-Auswahl und das für Beurteilungs-Auswahl), die ich in meinem Formular habe? Die wurden irgendwie übersehen.

ähnlich den Radiobutton in einer Schleife. Ich habe sich auch nicht übersehen aber es ist ja bereits eins ausgewählt. Du solltest ggf. mit optgroup arbeiten.

Zitat
 2. Dass "//"-Zeichen heißt oder, oder?

Nein, es ist ein Kommentar. Wenn Du eine ODER-Verbindung willst (in einer Bedingung) dann nutze ||, oder meintest Du das?

Zitat
 3. Warum sind da zwei Anführungsstriche in der eckigen Klammer z.B. ['absender']?
Weil es sich hier um eine Art Array (Collection) handelt. Es sind immer Schlüssel-Wert-Paare enthalten. Der Schlüssel ist hier eine Zeichenkette (daher die Anführungszeichen).

document.forms[0].absender ist das selbe wie document.forms[0].elements["absender"]

Über elements zu gehen ist universeller und ich bevorzuge es deshalb.

Zitat
 4. Wie schreibt man nun einen String, in dem man alle Fehlermeldungen mit einmal ausgeben kann, d.h. wenn der Benutzer mehrere Felder nicht ausgefüllt hat?

In dem man statt der Alert's eine Variable zB befüllt.
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 

// der String - zu beginn leer
var str = "";
if ( ... )
  str += "Hier eine Nachricht \n"; // \n ist ein Zeilenumbruch

...

if ( ... )
  str += "Hier die 2.  Nachricht \n"; 

...

if ( ... )
  str += "Hier die 3.  Nachricht \n"; 


...

window.alert(str);



Zitat
 5. Warum hat man bei der function(e) das e geschrieben. War das eine wahllose Bezeichnung?

Statt e hätte dort auch was anderes stehen können, ja. Das e soll Event heißen. Diese onclick, onload, onsubmit, ... Funktionen werden ja ausgelöst, weil ein Ereignis (ein Event) eingetreten ist. Manchmal möchte man auch wissen, was es ausgelöst hat und benötigt somit das Objekt e. Man kann zB ermittelt, welches Element angeklickt wurde. Hier ist es nicht von Bedeutung und könnte auch weggelassen werden.
Die Bezeichnung e wird auch gern bei try-catch-Klauseln verwendet. Hier soll e für Error stehen. Im Kontekt betrachtet wird das jedoch idR. klar.

Schönen Abend
Micha

geschrieben von Micha am 19.12.2009 - 21:00
Hi Danny,

Deine Antwort war, als ich Antworten geklickt habe, noch nicht da, sonst hätte ich nicht soviel wiederholt!

Gruß Micha

geschrieben von nicole.g am 20.12.2009 - 13:58
Hallo ihr beiden!

Vielen Dank für eure Statements.

Ich habe gerade das mit dem String umsetzten wollen und habe folgendes programmiert:

PHP-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: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 

<?
<script type="text/javascript">

        /* <![CDATA[ */

          function checkInput(f) {
        f.onsubmit = function(e) {
            var isComplete = false;
            var str ="";

            // Geschlecht
            for (var i=0; i<this.elements['geschlecht'].length; i++) {
                if (this.elements['geschlecht'][i].checked) {
                    isComplete = true;
                    break;
                                                                             }
                                                                      }

            if (!isComplete) {
            str += "geschlecht\n"; // hänge das fehlerhafte Feld Geschlecht an den bestehenden String, n is ein Zeilenumbruch
                                         }

            // Alter
            if (this.elements['alter'].value == "" || isNaN(parseInt(this.elements['alter'].value))) {
            str += "alter\n"; // hänge das fehlerhafte Feld Alter an den bestehenden String, n is ein Zeilenumbruch
                                                                                                      }

            // Note
            for (var i=0; i<this.elements['note'].length; i++) {
                if (this.elements['note'][i].checked) {
                    isComplete = true;
                    break;
                                                                      }
                                                                }

            if (!isComplete) {
            str += "note\n"; // hänge das fehlerhafte Feld Note an den bestehenden String, n is ein Zeilenumbruch
                             }

            // Nachricht
            if (this.elements['nachricht'].value == "") {
                        str += "nachricht\n"; // hänge das fehlerhafte Feld Nachricht an den bestehenden String, n is ein Zeilenumbruch
                                                                    }
                                                                     }

            // Mail
            if (this.elements['absender'].value == "" || this.elements['absender'].value.indexOf('@') < 0) {
            str += "absender\n"; // hänge das fehlerhafte Feld Absender an den bestehenden String, n is ein Zeilenumbruch
                                                                                                            }


             if(str!= "") {
                         window.alert("Folgende Felder haben Sie nicht ausgefüllt: str");
                         return false;
                         } else {
                         return true;
                                }



    window.onload = function(e) {
        var form = document.forms[0];
        if (form)
            checkInput(form);
                                 }

        /* ]]> */
}
</script>
?>


Warum funktioniert das nicht?

Der Browser ignoriert es völlig und gibt mir gar keine Fehlermeldungen mehr aus, sondern verschickt es, auch wenn ich Felder leer lasse.

Was hab ich denn flasch gemacht?

Lieben Gruß

Nicole


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.