Überprüfungsbutton für ein Eingabeformular erstellen

nikva · 8. Nov 2020

Hallo,
Ich will für eine Formularseite zum eingeben von verschiedenen Angaben zum erstellen eines Profils einen Button einfügen der überprüft ob die eingegebenen Daten auch korrekt sind(Datum wo ein Datum hingehört, welche Felder sind noch leer)
Man könnte das alles auch einzeln über prompts abfragen, aber das ist nicht das was ich will

Ich weiß nicht so recht wie ich mit javascript anfange und wäre über eine kleine starthilfe dankbar 🙂
[CODE lang="html" title="dokument"]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="../css/stylesheet.css">
<title>Student erfassen</title>
</head>
<body>
<nav>
<ul>
<li><a href="../index.html">Übersicht Studenten</a></li>
</ul>
</nav>
<h3>Student erfassen</h3>

<table>
<tr>
<td><form>Vorname:</td>
<td><p></form>
<label for="fakultät">
<input id="fakultät" name="fakultät">
</label>
</p></td>
</tr>
<tr>
<td><form>Nachname:</td>
<td><p><form>
<label for="nname">
<input id="nname" name="nname">
</label>
</p></td>
</tr>
<tr>
<td><form>Geburtsdatum:</td>
<td><p><form>
<label for="geburtsdatum">
<input id="geburtsdatum" name="geburtsdatum">
</label>
</p></td>
</tr>

<tr>
<td><form method="POST">
Fakultät: </td>
<td><select name="Fakultät" size="1">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
</select>
</form>
</td>
</tr>

<tr>
<td><form>Studiengruppe:</td>
<td><p><form>
<label for="Studiengruppe">
<input id="Studiengruppe" name="Studiengruppe">
</label>
</p></td>
</tr>

<tr>
<td><form method="POST">
Semester: </td>
<td><select name="Semester" size="1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</form>
</td>
</tr>
<tr><td>_____________________________</td></tr>
<tr><td>Ich biete mich als Tutor</td></tr>
<tr>
<td><form>Modul 1</td>
<td><p><form>
<label for="modul1">
<input id="modul1" name="modul1">
</label>
</p></td>
</tr>
<tr>
<td><form>Modul 2</td>
<td><p><form>
<label for="modul2">
<input id="modul2" name="modul2">
</label>
</p></td>
</tr>
<tr>
<td><form>Modul 3</td>
<td><p><form>
<label for="modul3">
<input id="modul3" name="modul3">
</label>
</p></td>
</tr>
</table>
Validierung
</body>
</html>[/CODE]

nikva · 8. Nov 2020

[CODE lang="javascript" title="Ansatzversuch"]<script>

funtion validate() {
var vorname = document.getElementById("vorname").value;
var nachname = document.getElementById("nachname").value;
var geburtsdatum = document.getElementById("geburtsdatum").value;
var fakultät = document.getElementById("fakultät").value;
var studiengruppe = document.getElementById("studiengruppe").value;
var semester = document.getElementById("semester").value;
var email = document.getElementById("email").value;
var modul1 = document.getElementById("modul1").value;
var modul2 = document.getElementById("modul2").value;
var modul3 = document.getElementById("modul3").value;

</script>[/CODE]
Hab hier mal versucht den Inhalt der Eingabefelder mit dieser methode in variablen zu übertragen aber erhalte eine "Expression expected" Meldung bei der ersten Var zuweisung.

Thallius · 8. Nov 2020

Es gibt kein Element mit der ID Vorname und Nachname. die Id dieser Felder is vname und nname. Das gleiche gilt für fast alle anderen Felder. Die selects haben gar keine Id. Man benutzt auch keine deutschen Sonderzeichen für identifier.

nikva · 8. Nov 2020

Auch wenn ich die IDs anpasse kriege ich die selbe Fehlermeldung.

Javascript:

<script>

    
    funtion validate(){
            var name = document.getElementByID("name").value;
            var surname = document.getElementByID("surname").value;
            var birthday = document.getElementByID("birthday").value;
            var faculty = document.getElementByID("faculty").value;
            var studentGroup = document.getElementByID("studentGroup").value;
            var semester = document.getElementByID("semester").value;
            var email = document.getElementByID("email").value;
        
    }

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="../css/stylesheet.css">
    <title>Student erfassen</title>
  </head>
  <body>
    <nav>
        <ul>
          <li><a href="../index.html">Übersicht Studenten</a></li>
        </ul>
      </nav>
    <h3>Student erfassen</h3>

    <form>
      <input id="name" value="John" type="text"/>
      <input id="surname" value="Doe" type="text"/>
    </form>

    <table>
        <tr>
          <td><form>Vorname:</td>
          <td><p></form>
            <label for="name">
              <input id="name" name="name">
            </label>
        </p></td>
         </tr>
         <tr>
            <td><form>Nachname:</td>
            <td><p><form>
              <label for="surname">
                <input id="surname" name="surname">
              </label>
          </p></td>
           </tr>
           <tr>
            <td><form>Geburtsdatum:</td>
            <td><p><form>
              <label for="birthday">
                <input id="birthday" name="birthday">
              </label>
          </p></td>
           </tr>

           <tr>
            <td><form id="fakulty" method="POST">
        fakulty: </td>
        <td><select id= "fakulty" name="fakulty" size="1">
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        </select>
        </form>
    </td>
    </tr>

           <tr>
            <td><form>studyGroup:</td>
            <td><p><form>
              <label for="studyGroup">
                <input id="studyGroup" name="studyGroup">
              </label>
          </p></td>
           </tr>

    <tr>
        <td><form method="POST">
    Semester: </td>
    <td><select id="semester" name="semester" size="1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    </select>
    </form>
</td>
</tr>
<tr><td>email:</td>
  <td><p><form>
    <label for="email">
      <input type="email" id="email" name="email">
    </label>
</p></td></tr>
<tr><td>_____________________________</td></tr>
<tr><td>Ich biete mich als Tutor an für:</td></tr>
  <tr>
    <td><form>Modul 1</td>
    <td><p><form>
      <label for="module1">
        <input id="module1" name="module1">
      </label>
  </p></td>
   </tr>
   <tr>
      <td><form>Modul 2</td>
      <td><p><form>
        <label for="module2">
          <input id="module2" name="module2">
        </label>
    </p></td>
     </tr>
     <tr>
      <td><form>Modul 3</td>
      <td><p><form>
        <label for="module3">
          <input id="module3" name="module3">
        </label>
    </p></td>
     </tr>
    </table>
    <button onClick="checkEmptyInputs()">Validierung</button>

<script src="./student _erfassen.js"></script>
  </body>
</html>

Thallius · 8. Nov 2020

Deine ids sind nicht unique... du darfst nicht zwei Elementen die gleiche id geben

nikva · 8. Nov 2020

Ich habe vorher noch etwas anderes getestet und es nicht entfernt mit

HTML:

    <form>
      <input id="name" value="John" type="text"/>
      <input id="surname" value="Doe" type="text"/>
    </form>

aber ansonsten sind die ids doch unique? Oder meinst du dass ich als name den selben string verwende wie für die id?

mihe7 · 8. Nov 2020

Er meint z. B. Zeilen 17 und 26 im HTML-Code in Kommentar #4.

nikva · 8. Nov 2020

deswegen hab ich ja zeile 16-19 entfernt, aber das Problem bleibt bestehen

mihe7 · 8. Nov 2020

Du bindest eine JavaScript-Datei ein, die mit <script> anfängt. Dieses Tag ist HTML und kein JavaScript. Schmeiß das mal raus. BTW: Warum hast Du zig form-Elemente?

mihe7 · 8. Nov 2020

Ach, und weil ich es gerade sehe: funtion - da fehlt ein c.

Und noch was: <script src="./student _erfassen.js"></script> - ich wage zu bezweifeln, dass das Leerzeichen vor dem Underscore korrekt ist.

/e Das wird ja immer mehr: die Methode heißt getElementById und nicht getElementByID. Dann wird nicht validate() aufgerufen sondern checkEmptyInputs() - die Funktion existiert überhaupt nicht. Außerdem heißt die ID im HTML fakulty, während im JavaScript faculty verwendet wird.

Thallius · 8. Nov 2020

mihe7 hat gesagt.:
Ach, und weil ich es gerade sehe: funtion - da fehlt ein c.

Und noch was: <script src="./student _erfassen.js"></script> - ich wage zu bezweifeln, dass das Leerzeichen vor dem Underscore korrekt ist.

/e Das wird ja immer mehr: die Methode heißt getElementById und nicht getElementByID. Dann wird nicht validate() aufgerufen sondern checkEmptyInputs() - die Funktion existiert überhaupt nicht. Außerdem heißt die ID im HTML fakulty, während im JavaScript faculty verwendet wird.

och menno, doch nicht alles auf einmal du Spielverderber. Ich dachte ich hätte jetzt ne Beschäftigung für den Rest des Abends gefunden 😀

nikva · 8. Nov 2020

Ich habe die sehr dummen Fehler(sorry) korrigiert und versucht die methode zu schreiben. Allerdings werden so immer alle Werte gelöscht und es wird die alert meldung nicht ausgegeben...

Javascript:

    function validate(){
            var name = document.getElementByiD("name").value;
            var surname = document.getElementByiD("surname").value;
            var birthday = document.getElementByiD("birthday").value;
            var faculty = document.getElementByiD("faculty").value;
            var studentGroup = document.getElementByiD("studentGroup").value;
            var semester = document.getElementByiD("semester").value;
            var email = document.getElementByiD("email").value;
            var a=" ",b= " ",c= " ",d= " ",e=" ",f=" ",g=" ",
            if(name == " "){
                var a = "name";
            }
            if(surname == " "){
                var b = "surname";
            }
            if(birthday == " "){
                var c = "birthday";
            }
            if(faculty == " "){
                var d = "faculty";
            }
            if(studentGroup == " "){
                var e = "studentGroup";
            }
            if(semester == " "){
                var f = "semester";
            }
            if(email == " "){
                var g = "email";
            }
            if (name == " " | surname == " " | birthday == " " | faculty == " " | studentGroup == " " | semester == " " | email == " "){
                alert ("Bitte alle Felder ausfüllen!: " + a +" " + b + " " + c + " " + d +" " + e + " " + f + " " + e + " " + g);
                console.log("Validierung fehlgeschlagen");
            }
            else{
                console.log("Validierung erfolgreich");
                alert ("erfolgreich");
            }
            }

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="../css/stylesheet.css">
    <title>Student erfassen</title>
  </head>
  <body>
    <nav>
        <ul>
          <li><a href="../index.html">Übersicht Studenten</a></li>
        </ul>
      </nav>
    <h3>Student erfassen</h3>
    <table>
        <tr>
          <td><form>Vorname:</td>
          <td><p></form>
            <label for="name">
              <input id="name" name="name">
            </label>
        </p></td>
         </tr>
         <tr>
            <td><form>Nachname:</td>
            <td><p><form>
              <label for="surname">
                <input id="surname" name="surname">
              </label>
          </p></td>
           </tr>
           <tr>
            <td><form>Geburtsdatum:</td>
            <td><p><form>
              <label for="birthday">
                <input id="birthday" name="birthday">
              </label>
          </p></td>
           </tr>
           <tr>
            <td><form id="faculty" method="POST">
        Fakultät: </td>
        <td><select id= "faculty" name="faculty" size="1">
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        </select>
        </form>
    </td>
    </tr>
           <tr>
            <td><form>Studiengruppe:</td>
            <td><p><form>
              <label for="studyGroup">
                <input id="studyGroup" name="studyGroup">
              </label>
          </p></td>
           </tr>
    <tr>
        <td><form method="POST">
    Semester: </td>
    <td><select id="semester" name="semester" size="1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    </select>
    </form>
</td>
</tr>
<tr><td>email:</td>
  <td><p><form>
    <label for="email">
      <input type="email" id="email" name="email">
    </label>
</p></td></tr>
<tr><td>_____________________________</td></tr>
<tr><td>Ich biete mich als Tutor an für:</td></tr>
  <tr>
    <td><form>Modul 1</td>
    <td><p><form>
      <label for="module1">
        <input id="module1" name="module1">
      </label>
  </p></td>
   </tr>
   <tr>
      <td><form>Modul 2</td>
      <td><p><form>
        <label for="module2">
          <input id="module2" name="module2">
        </label>
    </p></td>
     </tr>
     <tr>
      <td><form>Modul 3</td>
      <td><p><form>
        <label for="module3">
          <input id="module3" name="module3">
        </label>
    </p></td>
     </tr>
    </table>
    <button onClick="validate()">Validierung</button>
<script src="./student_erfassen.js"></script>
  </body>
</html>

Thallius · 8. Nov 2020

Um oder zu vergleichen solltest du || Benutzen

mihe7 · 8. Nov 2020

Thallius hat gesagt.:
och menno, doch nicht alles auf einmal du Spielverderber. Ich dachte ich hätte jetzt ne Beschäftigung für den Rest des Abends gefunden 😀

OK, ich halt mich raus 🙂 Hab eh grad keine Zeit.

nikva · 8. Nov 2020

Thallius hat gesagt.:
Um oder zu vergleichen solltest du || Benutzen

Danke, sollte ich das vielleicht lieber mit return werten machen?

thecain · 8. Nov 2020

nikva hat gesagt.:
document.getElementByiD("studentGroup").value

getElementById... Programmieren ist eine exakte Wissenschafft

nikva · 8. Nov 2020

ich hab das jetzt mal neu gemacht, und zumindest den validate check erfolgreich hingekriegt

Javascript:

var nameInput = document.getElementById("name");
var surnameInput = document.getElementById("surname");
var birthdayInput = document.getElementById("birthday");
var facultyInput = document.getElementById("faculty");
var studygroupInput = document.getElementById("studyGroup");
var semesterInput = document.getElementById("semester");
var emailInput = document.getElementById("email");

function validate(){
var fields = [nameInput, surnameInput, birthdayInput, facultyInput, studygroupInput, semesterInput, emailInput];
var emptyFields = fields.filter(x => x.value == "" || x.value == undefined);

return emptyFields.length > 0 ? alert('validation failed') : alert('validation successful')
}

Überprüfungsbutton für ein Eingabeformular erstellen

nikva

Bekanntes Mitglied

nikva

Bekanntes Mitglied

Thallius

Top Contributor

nikva

Bekanntes Mitglied

Thallius

Top Contributor

nikva

Bekanntes Mitglied

mihe7

Top Contributor

nikva

Bekanntes Mitglied

mihe7

Top Contributor

mihe7

Top Contributor

Thallius

Top Contributor

nikva

Bekanntes Mitglied

Thallius

Top Contributor

mihe7

Top Contributor

nikva

Bekanntes Mitglied

thecain

Top Contributor

nikva

Bekanntes Mitglied

Aktuelle Jobs

Neue Themen

Ähnliche Themen