Autor Beitrag
Csharp-programmierer
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: Fr 23.09.16 16: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.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20447
Erhaltene Danke: 2262

Win 10
C# (VS 2019)
BeitragVerfasst: Fr 23.09.16 17:11 
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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 02.10.16 09:25 
ausblenden 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.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20447
Erhaltene Danke: 2262

Win 10
C# (VS 2019)
BeitragVerfasst: So 02.10.16 09: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

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 02.10.16 10:47 
ausblenden volle Höhe 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.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20447
Erhaltene Danke: 2262

Win 10
C# (VS 2019)
BeitragVerfasst: So 02.10.16 11: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.

_________________
Zwei Worte werden Dir im Leben viele Türen öffnen - "ziehen" und "drücken".
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 02.10.16 12:42 
Ah. Vielen Dank. An sich funktioniert nun alles, aber nun möchte ich noch, dass das Passwort mindestens 6 Zeichen lang ist.

ausblenden volle Höhe 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.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20447
Erhaltene Danke: 2262

Win 10
C# (VS 2019)
BeitragVerfasst: So 02.10.16 13:00 
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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 02.10.16 14:23 
ausblenden 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>					

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

ausblenden 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.
ontopic starontopic starontopic starontopic starontopic starontopic starhalf ontopic starofftopic star
Beiträge: 20447
Erhaltene Danke: 2262

Win 10
C# (VS 2019)
BeitragVerfasst: So 02.10.16 14:48 
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 Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 02.10.16 19: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 :(

ausblenden volle Höhe 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>


ausblenden volle Höhe 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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 428
Erhaltene Danke: 51



BeitragVerfasst: So 02.10.16 20: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:

ausblenden 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.)

Für diesen Beitrag haben gedankt: Csharp-programmierer
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 02.10.16 20: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 428
Erhaltene Danke: 51



BeitragVerfasst: So 02.10.16 21:10 
Wo bindest du das JS denn ein?

Für diesen Beitrag haben gedankt: Csharp-programmierer
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 02.10.16 21:13 
Sorry :oops:

Im Script-Tag im Head Bereich

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
hydemarie
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 428
Erhaltene Danke: 51



BeitragVerfasst: So 02.10.16 21:17 
Fehlen noch irgendwo Klammern oder Anführungszeichen?

Für diesen Beitrag haben gedankt: Csharp-programmierer
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 02.10.16 21: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 428
Erhaltene Danke: 51



BeitragVerfasst: So 02.10.16 21:26 
Heißt das bei dir nicht pas2?

Für diesen Beitrag haben gedankt: Csharp-programmierer
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 02.10.16 21: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 428
Erhaltene Danke: 51



BeitragVerfasst: So 02.10.16 23: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. ;)

Für diesen Beitrag haben gedankt: Csharp-programmierer