I want to write a JavaScript function, that checks if the fields in the following HTML document are not empty. I do not want a prompt for every information but instead I want to implement a button at the end, that checks every field and returns a message that tells you which fields are still not filled.
JavaScript
x
131
131
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8"/>
5
<link rel="stylesheet" href="../css/stylesheet.css">
6
<title>Student erfassen</title>
7
</head>
8
<body>
9
<nav>
10
<ul>
11
<li><a href="../index.html">Übersicht Studenten</a></li>
12
</ul>
13
</nav>
14
<h3>Student erfassen</h3>
15
16
<table>
17
<tr>
18
<td><form>Vorname:</td>
19
<td><p></form>
20
<label for="Vorname">
21
<input id="Vorname" name="Vorname">
22
</label>
23
</p></td>
24
</tr>
25
<tr>
26
<td><form>Nachname:</td>
27
<td><p><form>
28
<label for="Nachname">
29
<input id="Nachname" name="Nachname">
30
</label>
31
</p></td>
32
</tr>
33
<tr>
34
<td><form>Geburtsdatum:</td>
35
<td><p><form>
36
<label for="geburtsdatum">
37
<input id="geburtsdatum" name="geburtsdatum">
38
</label>
39
</p></td>
40
</tr>
41
42
<tr>
43
<td><form id="fakultät" method="POST">
44
Fakultät: </td>
45
<td><select name="fakultät" size="1">
46
<option>01</option>
47
<option>02</option>
48
<option>03</option>
49
<option>04</option>
50
<option>05</option>
51
<option>06</option>
52
<option>07</option>
53
<option>08</option>
54
<option>09</option>
55
<option>10</option>
56
<option>11</option>
57
<option>12</option>
58
<option>13</option>
59
</select>
60
</form>
61
</td>
62
</tr>
63
64
<tr>
65
<td><form>Studiengruppe:</td>
66
<td><p><form>
67
<label for="studiengruppe">
68
<input id="studiengruppe" name="studiengruppe">
69
</label>
70
</p></td>
71
</tr>
72
73
<tr>
74
<td><form method="POST">
75
Semester: </td>
76
<td><select id="semester" name="Semester" size="1">
77
<option>1</option>
78
<option>2</option>
79
<option>3</option>
80
<option>4</option>
81
<option>5</option>
82
<option>6</option>
83
<option>7</option>
84
<option>8</option>
85
<option>9</option>
86
<option>10</option>
87
<option>11</option>
88
<option>12</option>
89
</select>
90
</form>
91
</td>
92
</tr>
93
<tr><td>email:</td>
94
<td><p><form>
95
<label for="email">
96
<input type="email" id="email" name="email">
97
</label>
98
</p></td></tr>
99
<tr><td>_____________________________</td></tr>
100
<tr><td>Ich biete mich als Tutor an für:</td></tr>
101
<tr>
102
<td><form>Modul 1</td>
103
<td><p><form>
104
<label for="modul1">
105
<input id="modul1" name="modul1">
106
</label>
107
</p></td>
108
</tr>
109
<tr>
110
<td><form>Modul 2</td>
111
<td><p><form>
112
<label for="modul2">
113
<input id="modul2" name="modul2">
114
</label>
115
</p></td>
116
</tr>
117
<tr>
118
<td><form>Modul 3</td>
119
<td><p><form>
120
<label for="modul3">
121
<input id="modul3" name="modul3">
122
</label>
123
</p></td>
124
</tr>
125
</table>
126
Validierung
127
128
<script src="./student _erfassen.js"></script>
129
</body>
130
</html>
131
I started to create variables to read the content of the fields but have an error message already
(“Expression expected”) in line 4
JavaScript
1
6
1
<script>
2
3
funtion validate() {
4
var vorname = document.getElementById("vorname").value;
5
var nachname = document.getElementById("nachname").value;
6
I hope you can help me.
Advertisement
Answer
Try something like this:
JavaScript
1
11
11
1
var nameInput = document.getElementById("name");
2
var surnameInput = document.getElementById("surname");
3
//others fields
4
5
function checkEmptyInputs(){
6
var fields = [nameInput, surnameInput];
7
var emptyFields = fields.filter(x => x.value == "" || x.value == undefined);
8
var emptyFieldsIds = emptyFields.map(x => x.id);
9
10
return emptyFields.length > 0 ? alert(`There are empty fields with Ids: ${emptyFieldsIds.join(',')}`) : alert(`There are not empty fields`)
11
}
JavaScript
1
7
1
<html>
2
<form>
3
<input id="name" value="John" type="text"/>
4
<input id="surname" value="Doe" type="text"/>
5
</form>
6
<button onClick="checkEmptyInputs()">check fields</button>
7
</html>