Wie kann JS den Inhalt von HTML Textboxen analysieren?

Csharp-programmierer · Verfasst: Fr 23.09.16 17:10

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?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Hallo,

in HTML/JS gibt es genauso Events. Hier 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

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Csharp-programmierer · Verfasst: So 02.10.16 10:25

markieren

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?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

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

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Csharp-programmierer · Verfasst: So 02.10.16 11:47

markieren

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?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

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.

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Csharp-programmierer · Verfasst: 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.

markieren

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?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Du prüfst eine Eigenschaft "value" der Checkbox, richtig wäre "checked".

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Csharp-programmierer · Verfasst: So 02.10.16 15:23

markieren

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>

markieren

HTML-Dokument

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

markieren

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

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

Christian S. · Beiträge: 20451 Erhaltene Danke: 2264 Win 10 C# (VS 2019)

Du vergleichst schon wieder ein HTML-Element anstatt seiner Eigenschaft ...

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".

Csharp-programmierer · Verfasst: 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

markieren

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>

markieren

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>

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 475 Erhaltene Danke: 51

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:

markieren

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 · Verfasst: 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?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 475 Erhaltene Danke: 51

Wo bindest du das JS denn ein?

Csharp-programmierer · Verfasst: So 02.10.16 22:13

Sorry

Im Script-Tag im Head Bereich

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 475 Erhaltene Danke: 51

Fehlen noch irgendwo Klammern oder Anführungszeichen?

Csharp-programmierer · Verfasst: 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:

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 475 Erhaltene Danke: 51

Heißt das bei dir nicht pas2?

Csharp-programmierer · Verfasst: 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.

www.mainlysoft.com/msnetwork.html

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein

hydemarie · Beiträge: 475 Erhaltene Danke: 51

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.

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme