How do I implement a button, that checks if the fields in a document are not empty? JavaScript

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.

Answer

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>

Advertisement

Answer