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
Validierung127
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 fields4
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>