Entwickler-Ecke

Programmiersprachen (Client) - Wie kann JS den Inhalt von HTML Textboxen analysieren?


Csharp-programmierer - Fr 23.09.16 17:10
Titel: Wie kann JS den Inhalt von HTML Textboxen analysieren?
Hallo Forum,
ich bin gerade dabei eine HTML Registrierungsform zu schreiben. Dafür habe ich 2 Felder zum Email bzw. Passwort eingeben, um sicherzustellen, dass die Daten korrekt eingegeben wurden. Wenn nun die Emails ungleich sind, soll sich JS schon melden und den Benutzer darauf hinweisen, ohne dass man erst das Formular absendet und dann erst die Benachrichtigung bekommt.

In C# würde ich den Textboxen einfach Ereignisse verpassen und dann das jeweils checken, aber wie man das mir HTML/CSS macht, weiß ich nicht. Wie muss ich an die Sache rangehen?


Christian S. - Fr 23.09.16 18:11
Hallo,

in HTML/JS gibt es genauso Events. Hier [http://www.w3schools.com/js/js_events_examples.asp] gibt es einige Beispiele, wie man damit umgehen kann. Du suchst vermutlich irgendeines der Events unter "Input". Welches das ist, hängt davon ab, wann Du dem Benutzer wie mitteilen willst, dass die Eingaben (nicht) übereinstimmen.

Grüße
Christian


Csharp-programmierer - So 02.10.16 10:25

JavaScript-Quelltext 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
 
<script>
    function CheckPassField() {
      var x = document.getElementById("password1");
      var y = document.getElementById("password2");

      if(x != y) {
        alert("Die von Ihnen eingegebenen Passwörter stimmen nicht überein.");
      } else {
        alert("Falsch");
      }
    }
  </script>


Und dann rufe ich bei dem Feld, wo man das Passwort bestätigen muss, das onblur Event auf. Aber egal was ich eingebe, es kommt immer "Falsch". Wo ist hier der Fehler?


Christian S. - So 02.10.16 10:32
Hallo,

Erstmal generell:
Du vergleichst, ob die beiden HTML-Elemente gleich sind. Du möchtest eigentlich wissen, ob der Wert der in den Input-Boxen steht, gleich ist. Du musst also die value-Eigenschaften vergleichen. (Wie Du in C# nicht die Textboxen sondern deren Text-Eigenschaften vergleichen würdest.)

Der Fehler sollte hier aber eigentlich dazu führen, dass immer x != y gilt. Haben die beiden HTML-Elemente die korrekten IDs? Ansonsten sind x und y beide null und damit gleich.

Irgendwie macht die Meldung "Falsch" auch keinen Sinn, denn die Eingabe ist dann richtig, oder? :gruebel:

Grüße
Christian


Csharp-programmierer - So 02.10.16 11:47

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:
29:
30:
31:
32:
33:
 
function CheckAllData() {
      var pas1 = document.getElementById("pass1");
      var pas2 = document.getElementById("pass2");

      var em1 = document.getElementById("email1");
      var em2 = document.getElementById("email2");

      var pass_correct = "false";
      var email_correct = "false";

      if (pas1.value != pas2.value) {
        document.getElementById("pass_error").innerHTML = "Die eingegebenen Passwörter stimmen nicht überein";
        document.getElementById("pass_error").style.color = "#FFFFFF";
        document.getElementById("message_block").style.backgroundColor = "#FFDCDC";
        pass_correct = "false";
      } else {
        pass_correct = "true";
      }

      if (em1.value != em2.value) {
        document.getElementById("email_error").innerHTML = "Die eingegebenen E-Mail Adressen stimmen nicht überein";
        document.getElementById("email_error").style.color = "#FFFFFF";
        document.getElementById("message_block").style.backgroundColor = "#FFDCDC";
        email_correct = "false";
      } else {
        email_correct = "true";
      }

      if (pass_correct.value == "true" && email_correct == "true") {
        document.getElementById("email_error").innerHTML = "Alle Daten sind korrekt. Nun wird eine Verbindung zu dem Mainlysoft SQL-Servern hergestellt.";
        document.getElementById("message_block").style.backgroundColor = "#A9F5BC";
      }
    }


Sooo. Also ob die Emails und Passwörter richtig sind, erkennt er. Aber wenn alles in Ordnung ist, soll der Benutzer darüber informiert werden. Das passiert im letzten If-Statement. Das funktioniert aber noch nicht, diese Abfrage. Was muss ich anders machen?


Christian S. - So 02.10.16 12:20
pass_correct ist einfach eine Variable vom Typ String und hat daher keine Eigenschaft value.

Du kannst übrigens auch in Javascript die bool-Werte true und false nutzen und musst das nicht als String machen.


Csharp-programmierer - So 02.10.16 13:42
Ah. Vielen Dank. An sich funktioniert nun alles, aber nun möchte ich noch, dass das Passwort mindestens 6 Zeichen lang ist.


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:
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:
 
<script>
    function DisableButton() {
      var checked = document.getElementById("cb_agb");
      if (checked.value == true) {
        document.getElementById("button1").disabled = false;
      } else {
        document.getElementById("button1").disabled = true;
      }
    }

    function CheckAllData() {
      var pas1 = document.getElementById("pass1");
      var pas2 = document.getElementById("pass2");

      var em1 = document.getElementById("email1");
      var em2 = document.getElementById("email2");

      var pass_correct = false;
      var email_correct = false;

      if (pas1.value != pas2.value) {
        document.getElementById("pass_error").innerHTML = "Die eingegebenen Passwörter stimmen nicht überein";
        document.getElementById("pass_error").style.color = "#FFFFFF";
        document.getElementById("message_block").style.backgroundColor = "#FA5858";
        pass_correct = false;
      } else {
        pass_correct = true;
        document.getElementById("pass_error").innerHTML = "";
      }

      if (em1.value != em2.value) {
        document.getElementById("email_error").innerHTML = "Die eingegebenen E-Mail Adressen stimmen nicht überein";
        document.getElementById("email_error").style.color = "#FFFFFF";
        document.getElementById("message_block").style.backgroundColor = "#FA5858";
        email_correct = false;
      } else {
        email_correct = true;
        document.getElementById("email_error").innerHTML = "";
      }

      if (pass_correct == true && email_correct == true) {
        if(pas1.length >= 6) {
          document.getElementById("pass_error").innerHTML = "";
          document.getElementById("best_msg").innerHTML = "Alle Daten sind korrekt. Es wird nun die Verbindung zu den Mainlysoft SQL-Servern hergestellt.";
          document.getElementById("email_error").innerHTML = "";
          document.getElementById("best_msg").style.color = "#FFFFFF";
          document.getElementById("message_block").style.backgroundColor = "#A9F5BC";
        } else {
          document.getElementById("pass_error").innerHTML = "Das Passwort muss mindestens 6 Zeichen lang sein.";
          document.getElementById("pass_error").style.color = "#FFFFFF";
          document.getElementById("message_block").style.backgroundColor = "#FA5858";
        }
      }
    }

  </script>


Auch wenn das Passwort nun länger als 6 Zeichen ist, wird mir der Fehler angezeigt, dass das Passwort mindestens 6 Zeichen lang sein muss.
PS: Und ich habe noch eine CheckBox. Wenn diese gecheckt ist, soll sich ein Button aktivieren und wenn sie unchecked ist, soll der Button sich wieder deaktivieren. Das funktioniert noch nicht. Wie mache ich das?


Christian S. - So 02.10.16 14:00
Du prüfst eine Eigenschaft "value" der Checkbox, richtig wäre "checked".


Csharp-programmierer - So 02.10.16 15:23

HTML-Dokument 
1:
 
<input type="checkbox" id="cb_agb" name="agb" onchange="DisableButton()">   Ich habe die <a style="color:#ffffff;" href="">AGB's</a> gelesen</input>


HTML-Dokument 
1:
 
<a class="wsite-button" onclick="CheckAllData()"><span class="wsite-button-inner">Absenden</span></a>


JavaScript-Quelltext 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
 
function DisableButton() {
      var checked = document.getElementById("cb_agb");
      if (checked == true) {
        document.getElementById("button1").disabled = false;
        alert("false");
      } else {
        document.getElementById("button1").disabled = true;
        alert("true");
      }
    }




Aber irgendwie wird der Button nicht (de)aktiviert :(


Christian S. - So 02.10.16 15:48
Du vergleichst schon wieder ein HTML-Element anstatt seiner Eigenschaft ...


Csharp-programmierer - So 02.10.16 20:22
Jetzt habe ich es verstanden. Nun habe ich den Code ein wenig umstrukturiert und nun wird werder für die Checkbox als auch für den Button das Event ausgeführt. Wo ist der Fehler? PS: Ich suche jz schon seit einer Stunde :(


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:
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:
 
<script>
    function DisableButton() {
      var cb = document.getElementById("cb_agb");
      if(cb.checked == true) {
        alert("hallo");
      } else {
        alert("tschüss");
      }
    }
  
    function CheckAllData() {
        alert("hier");
      var pas1 = document.getElementById("pass1");
      var pas2 = document.getElementById("pass2");
      var username = document.getElementById("username");
      var sicherheitsfrage = document.getElementById("question");
      var sicher_antwort = document.getElementById("answer");
      var name = document.getElementById("name");
      var vorname = document.getElementById("vorname");
      var geburtsdatum = document.getElementById("geburtsdatum");
      var em1 = document.getElementById("email1");
      var em2 = document.getElementById("email2");
      var pass_correct = false;
      var email_correct = false;

      if (pas1.value != pas2.value) {
        document.getElementById("pass_error").innerHTML = "Die eingegebenen Passwörter stimmen nicht überein";
        document.getElementById("pass_error").style.color = "#FFFFFF";
        document.getElementById("message_block").style.backgroundColor = "#FA5858";
        pass_correct = false;
      } else {
        pass_correct = true;
        document.getElementById("pass_error").innerHTML = "";
      }

      if (em1.value != em2.value) {
        document.getElementById("email_error").innerHTML = "Die eingegebenen E-Mail Adressen stimmen nicht überein";
        document.getElementById("email_error").style.color = "#FFFFFF";
        document.getElementById("message_block").style.backgroundColor = "#FA5858";
        email_correct = false;
      } else {
        email_correct = true;
        document.getElementById("email_error").innerHTML = "";
      }
      if (pass_correct == true && email_correct == true) {
        if(pas1.value.length >= 6) {
          if(pas1.value != "" && pass2.value != "" && username.value != "" && sicherheitsfrage.value != "" && sicher_antwort.value != "" && name.value != "" && vorname.value != "" && geburtsdatum.value !=   

          "" && em1.value != "" && em2.value != "") {
            document.getElementById("pass_error").innerHTML = "";
            document.getElementById("best_msg").innerHTML = "Alle Daten sind korrekt. Es wird nun die Verbindung zu den Mainlysoft SQL-Servern hergestellt.";
            document.getElementById("email_error").innerHTML = "";
            document.getElementById("best_msg").style.color = "#FFFFFF";
            document.getElementById("message_block").style.backgroundColor = "#A9F5BC";
          } else {
            document.getElementById("pass_error).innerHTML = "Bitte füllen Sie alle Eingabefelder aus.";
            document.getElementById("message_block").style.backgroundColor = "#FA5858";
            document.getElementById("email_error").innerHTML = "";
          }
        } else {
          document.getElementById("pass_error").innerHTML = "Das Passwort muss mindestens 6 Zeichen lang sein.";
          document.getElementById("pass_error").style.color = "#FFFFFF";
          document.getElementById("message_block").style.backgroundColor = "#FA5858";
        }
      }
    }

  </script>



HTML-Dokument 
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:
 
<center><div>
      <table>
         <tr>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px" type="text" placeholder="Benutzername eingeben" name="username" id="username" required></input></td>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px" type="text" placeholder="Geburtsdatum eingeben" name="geburtsdatum" id="geburtsdatum" required></input></td>
         </tr>
         <tr>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px"  type="text" placeholder="Vorname" name="vorname" id="vorname" required></input></td>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px" type="text" placeholder="Nachname" name="lastname" id="name" reqired></input></td>
         </tr>
        <tr>
        <td> </td>
        </tr>
         <tr>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px" type="email" id="email1" placeholder="E-Mail eingeben" name="email_one" required></input></td>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px" type="email" id="email2" placeholder="E-Mail bestätigen" name="email_two" required></input></td>
         </tr>
         <tr>
        <td> </td>
         </tr>
        <tr>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px" type="text" placeholder="Sicherheitsfrage" name="safequestion" id="question" required></input></td>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px" type="text" placeholder="Antwort" name="question_answer" id="answer" reqired></input></td>
        </tr>
         <tr>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px" type="password" id="pass1" placeholder="Passwort" name="password1" required></input></td>
          <td><input class="wsite-form-input wsite-input wsite-input-width-370px" type="password"  id="pass2" placeholder="Passwort bestätigen" name="password2" required></input></td>
        </tr>
         <tr>
          <td><font color="white"><input type="checkbox" id="cb_agb" name="agb" onclick="DisableButton()">   Ich habe die <a style="color:#ffffff;" href="">AGB's</a> gelesen</input></font></td>
         </tr>
      <tr>
          <td> </td>
      </tr>
         <tr>
          <td><a class="blue-button" onclick="CheckAllData()"><span>Absenden</span></a></td>
         </tr>
  </table>
  </div></center>


hydemarie - So 02.10.16 21:14
Ich gehe jede Wette ein, deine Browserkonsole wirft dir da einen Syntaxfehler aus. Guck' doch mal rein. Ist ohnehin ein sehr nützliches Werkzeug.

Und zwar hier:


JavaScript-Quelltext 
1:
 
document.getElementById("pass_error).innerHTML // ...


Da fehlt was ... ;)

(Und mach' doch bitte bei der Gelegenheit die "AGB's" zu "AGB". Da rollen sich einem ja die Zehennägel hoch.)


Csharp-programmierer - So 02.10.16 21:26
Okay vielen Dank für die Antwort. Ich habe nun das '"' ergänzt. Die beiden Funktionen von JS habe ich in einem Scipt-Tag im Head-Bereich zusammengefasst. Der Webbrowser meldet, dass die beiden funktionen nicht definded sind. Aber sie sind ja im Head-Bereich definiert?


hydemarie - So 02.10.16 22:10
Wo bindest du das JS denn ein?


Csharp-programmierer - So 02.10.16 22:13
Sorry :oops:

Im Script-Tag im Head Bereich


hydemarie - So 02.10.16 22:17
Fehlen noch irgendwo Klammern oder Anführungszeichen?


Csharp-programmierer - So 02.10.16 22:23
if (pass_correct == true && email_correct == true) {
if(pas1.value.length >= 6) {
if(pas1.value != "" && pass2.value != "" && username.value != "" && sicherheitsfrage.value != "" && sicher_antwort.value != "" && name.value != "" && vorname.value != "" && geburtsdatum.value != "" && em1.value != "" && em2.value != "")

Anscheinend ist in diesen Zeilen irgendetwas falsch :eyes:


hydemarie - So 02.10.16 22:26
Heißt das bei dir nicht pas2?


Csharp-programmierer - So 02.10.16 22:32
Ups, sorry. Aber der Fehler ist immer noch da. Am besten ich hoste mal den Link (PS: Die Seite ist natürlich noch nicht fertig). Da müssten dann auch die Fehler stehen und der komplette Quelltext.

http://www.mainlysoft.com/msnetwork.html


hydemarie - Mo 03.10.16 00:14
Also mein Browser bemerkt sofort:

Zitat:
SyntaxError: illegal character msnetwork.html:142:151


Jetzt guck' dir diese Zeile mal an. Zeile 142, Spalte 151. Ich sehe das Problem dort. ;)


Csharp-programmierer - Mo 03.10.16 00:29
Hä? In dieser Zeile ist bei mir der Befegl } else {
Meiner meckert in der if Abfrage wo alle Werte gecheckt werden, ob sie leer sind (em1.value != "" .......). Aber ich sehe da keinen Fehler? :oops: :oops: :oops:


hydemarie - Mo 03.10.16 00:33
Kann dein Browser nicht direkt da hinspringen?

Na gut, ich helfe noch mal:


JavaScript-Quelltext 
1:
 
if(pas1.value != "" && pas2.value != "" && username.value != "" && sicherheitsfrage.value != "" && sicher_antwort.value != "" && name.value != "" && vorname.value != "" && geburtsdatum.value != "" && em1.value != "" && em2.value != "") {


Guck' mal in die Mitte. 8)

Nachtrag: Haha, die grottige Forensoftware hier löscht das Problem aus der Anzeige raus. Dann eben so (siehe Anhang). Was sehen wir? ;)


Csharp-programmierer - Mo 03.10.16 00:38
Häääääääääääääää??????????
Ich habe mir den Code jz mindestens 10 mal durchgelesen, aber wo ist den der Fehler???!!!??? Versteht JavaScript den Operator && nicht?


hydemarie - Mo 03.10.16 00:39
Doch, aber Javascript versteht etwas anderes nicht. Siehe oben... ;)


Csharp-programmierer - Mo 03.10.16 00:45
Im Browser zeigt er mir irgendein komisches Zeichen. Das ist mir aber auch vorhin schon aufgefallen:
1

Aber im Editor ist da kein Zeichen?
2

Wie das kommt, verstehe ich nicht ganz


hydemarie - Mo 03.10.16 00:47
Dann ist dein Editor nicht tauglich und du solltest einen besseren benutzen. Bis dahin ein Workaround: Lösch' einfach den Teil:


Quelltext 
1:
 
"" &&


Dann schreib' ihn noch mal. Das sollte das Problem lösen.


Csharp-programmierer - Mo 03.10.16 00:50
DANKE. Soo, dass hat mir jetzt den Rest gegeben, den schei* Editor nicht mehr zu benutzen :autsch: :autsch: :autsch: :autsch: :autsch: :autsch:


hydemarie - Mo 03.10.16 00:52
Gute Entscheidung.

Du hast ja nun einen Testfall, um mögliche neue Editoren auf Tauglichkeit zu testen. :D


Csharp-programmierer - Mo 03.10.16 00:54
Naja. Ich werde jetzt Nodepad++ benutzen, damit mir sowas nicht noch einmal passiert :/
Aber vielen Dank an euch :)


Delete - Mo 03.10.16 00:59
- Nachträglich durch die Entwickler-Ecke gelöscht -


hydemarie - Mo 03.10.16 01:04
Wer Dreamweaver für JavaScript benutzt, fliegt auch im Flugzeug einkaufen.


Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!