Überprüfungsbutton für ein Eingabeformular erstellen

N

nikva

Bekanntes Mitglied
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]
 
Zuletzt bearbeitet:
N

nikva

Bekanntes Mitglied
[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

Thallius

Top Contributor
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.
 
N

nikva

Bekanntes Mitglied
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>
 
N

nikva

Bekanntes Mitglied
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

mihe7

Top Contributor
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

mihe7

Top Contributor
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.
 
Zuletzt bearbeitet:
Thallius

Thallius

Top Contributor
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.
Zum Vergrößern anklicken....

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 :D
 
N

nikva

Bekanntes Mitglied
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>
 
N

nikva

Bekanntes Mitglied
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')
}
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
B Javascript Tutorial für DOM Manipulationen? Angular, React, JQuery - Fragen zu JavaScript 0
R Die Typisierung Service[] ergibt für mich keinen Sinn Angular, React, JQuery - Fragen zu JavaScript 5
Q Typsichers Binding für matSortDirection Angular, React, JQuery - Fragen zu JavaScript 10
N Cookies setzen für Verzeichnis Angular, React, JQuery - Fragen zu JavaScript 4
B PullDown erstellen für webseite? Angular, React, JQuery - Fragen zu JavaScript 12
X NegaMax für TicTacToe in JS gewinnt nicht... Angular, React, JQuery - Fragen zu JavaScript 11
P Bildschirmtastatur für Spiele Angular, React, JQuery - Fragen zu JavaScript 6
M Mit Ajax Daten als Eingabe für Dyngraph erzeugen Angular, React, JQuery - Fragen zu JavaScript 6
L [JavaScript] Mehrere Variablen für Live-Suche in MySql-DB Angular, React, JQuery - Fragen zu JavaScript 0
A Hilfe für guten Zweck Angular, React, JQuery - Fragen zu JavaScript 6
J Lese Webseite aus für LinkPreview Angular, React, JQuery - Fragen zu JavaScript 1
A Script für Benachrichtigung Angular, React, JQuery - Fragen zu JavaScript 9
S Suche Lösung für einen Slider mit Textverlinkung Angular, React, JQuery - Fragen zu JavaScript 2
L Suche D3 Tutorial (speziell für Sunburst-Darstellung...) Angular, React, JQuery - Fragen zu JavaScript 2
H Javascript für wordpress "open new window" Angular, React, JQuery - Fragen zu JavaScript 1
N JavaScript für Touch Devices bei DropDown Menü Angular, React, JQuery - Fragen zu JavaScript 4
F Schnellen Browser für HTML mit JS drin. Angular, React, JQuery - Fragen zu JavaScript 6
Fab1 [SUCHE] JavaScript Buch für Umsteiger Angular, React, JQuery - Fragen zu JavaScript 4
K Webapp für Iphone Safari Browser und Links Angular, React, JQuery - Fragen zu JavaScript 6
H HTML5 basierter Client für Webkartendienste auf Smartphones Angular, React, JQuery - Fragen zu JavaScript 2
F Dropdownmenü für JavaScript Angular, React, JQuery - Fragen zu JavaScript 5
S OnKlick für alle Objekte gleicher Art Angular, React, JQuery - Fragen zu JavaScript 17
J Dynamic Markers für POIs aus Postgresdatenbank Angular, React, JQuery - Fragen zu JavaScript 8
H Gadgeterweitung für Kostal Piko Angular, React, JQuery - Fragen zu JavaScript 5
R Anleitung für einen Konfetti Regen Angular, React, JQuery - Fragen zu JavaScript 9
D Kontrollkästchen/Checkbox automatisch aktivieren ! (für Profis) JavaScript Angular, React, JQuery - Fragen zu JavaScript 4
S Javascript für Teamvergabe gesucht. Angular, React, JQuery - Fragen zu JavaScript 4
S Skript für Greasemonkey Angular, React, JQuery - Fragen zu JavaScript 3
C Play und Stop-Error für Musik Angular, React, JQuery - Fragen zu JavaScript 4
A Programmierer für "kleines" Javaprogramm gesucht Angular, React, JQuery - Fragen zu JavaScript 2
G finde Einstellmöglichkeiten für Menue nicht. Angular, React, JQuery - Fragen zu JavaScript 2
M Hilfe gesucht für ein Projekt Angular, React, JQuery - Fragen zu JavaScript 1
K Suche Scrollscript für Objekte Angular, React, JQuery - Fragen zu JavaScript 3
E Fragen zu java Navigation für Internetseite Angular, React, JQuery - Fragen zu JavaScript 2
T Höhe und Breite übergeben für IE! Angular, React, JQuery - Fragen zu JavaScript 2
L Dauerlaufzeile mit Fotos für html Angular, React, JQuery - Fragen zu JavaScript 2
B Einen Timer für Windows Angular, React, JQuery - Fragen zu JavaScript 4
M Script für Namen? Angular, React, JQuery - Fragen zu JavaScript 5
D Inputfeld für Preiseingabe Angular, React, JQuery - Fragen zu JavaScript 6
K Fragen für Praktikum-aber keine Ahnung! Angular, React, JQuery - Fragen zu JavaScript 4
B Zähler für Eingabefeld Angular, React, JQuery - Fragen zu JavaScript 5
D 5 € Musicload Gutschein für Antwort: Formular mit JavaScript Angular, React, JQuery - Fragen zu JavaScript 10
N Java Refresh-Script für Java-Newb Angular, React, JQuery - Fragen zu JavaScript 4
K Bild soll nach 5 Sekunden für 5 Sekunden erscheinen Angular, React, JQuery - Fragen zu JavaScript 5
S Skript für Bannerwechsel Angular, React, JQuery - Fragen zu JavaScript 3
N Java script für detailierten Text anzeigen gesucht Angular, React, JQuery - Fragen zu JavaScript 4
A Timeoutfunktion für JavaScript Angular, React, JQuery - Fragen zu JavaScript 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben