# Ü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.

```
<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;
        
    }
```


```
<!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

```
<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...

```
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");
            }
            }
```


```
<!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

```
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')
}
```


----------

