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.
<!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="Vorname">
<input id="Vorname" name="Vorname">
</label>
</p></td>
</tr>
<tr>
<td><form>Nachname:</td>
<td><p><form>
<label for="Nachname">
<input id="Nachname" name="Nachname">
</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 id="fakultät" 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 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="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
<script src="./student _erfassen.js"></script>
</body>
</html>
I started to create variables to read the content of the fields but have an error message already
("Expression expected") in line 4
<script>
funtion validate() {
var vorname = document.getElementById("vorname").value;
var nachname = document.getElementById("nachname").value;
I hope you can help me.
Try something like this:
var nameInput = document.getElementById("name"); var surnameInput = document.getElementById("surname"); //others fields function checkEmptyInputs(){ var fields = [nameInput, surnameInput]; var emptyFields = fields.filter(x => x.value == "" || x.value == undefined); var emptyFieldsIds = emptyFields.map(x => x.id); return emptyFields.length > 0 ? alert(`There are empty fields with Ids: ${emptyFieldsIds.join(',')}`) : alert(`There are not empty fields`) }
<html> <form> <input id="name" value="John" type="text"/> <input id="surname" value="Doe" type="text"/> </form> <button onClick="checkEmptyInputs()">check fields</button> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.