选择标记中不需要读取表单提交

I have a page where the users can register accounts which looks like this:

Reg Form

The problem is, when the user doesn't or forgot to fill up gender, it just submits the form without an error even if I have a required function on the select tag. It's only the gender that I'm having problems with. The required function works with the other fields.

here's my form:

<div class="main">
  <div class="one">
    <div class="register">
      <center><h3>Add Account</h3></center>
      <form name="reg" action="code_exec.php" onsubmit="return validateForm()" method="post">
        <div>
          <label>ID</label>
          <input type="text" name="id" required>
        </div>
        <div>
          <label>First Name</label>
          <input type="text" name="firstname" required>
        </div>
        <div>
          <label>Last Name</label>
          <input type="text" name="lastname" required>
        </div>
        <div>
          <label>Email</label>
          <input type="text" name="email" placeholder="user@teamspan.com" required>
        </div>
        <div>
          <label>Username</label>
          <input type="text" name="username" required>
        </div>
        <div>
          <label>Password</label>
          <input type="password" name="password" required>
        </div>
        <div>
          <label>Street Address</label>
          <input type="text" name="street" required>
        </div>
        <div>
          <label>Town/Suburb</label>
          <input type="text" name="town" required>
        </div>
        <div>
          <label>City</label>
          <input type="text" name="city" required>
        </div>
        <div>
          <label>Phone No.</label>
          <input type="text" name="phone">
        </div>
        <div>
          <label>Landline No.</label>
          <input type="text" name="landline">
        </div>
        <div>
          <label>Gender</label>
            <select name="gender" required>
                <option disabled selected hidden>Select Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
        </div>
        <div>
          <label>User Levels</label>
            <select name="user_levels" required>
                <option disabled selected hidden>Select Access Level</option>
                <option value="0">Employee</option>
                <option value="1">Administrator</option>
                <option value="2">Manager</option>
                <option value="1">HR</option>
            </select>
        </div>
        <div>
          <label>Date</label>
          <input type="text" readonly="readonly" name="date" value="<?php echo date("Y/m/d");?>" required>
        </div>
        <div>
          <label>Sick Leave</label>
          <input type="text" name="sickleave" required>
        </div>
        <div>
          <label>Vacation Leave</label>
          <input type="text" name="vacationleave" required>
        </div>
        <div>
          <label>Picture (Link)</label>
          <input type="text" name="picture" value="img/emp/" required>
        </div>
        <div>
          <label></label>
          <input type="submit" name="submit" value="Add Account" class="button" style="color: white;" />
          <a href="hr_panel.php"><input type="button" value="Back" class="button" style="color: white;" />
        </div>
      </form>
    </div>
  </div>

</div>

You need to give value="" on first option i.e.Select Gender. Try following code

<div class="main">
  <div class="one">
    <div class="register">
      <center><h3>Add Account</h3></center>
      <form name="reg" action="code_exec.php" onsubmit="return validateForm()" method="post">
        <div>
          <label>ID</label>
          <input type="text" name="id" required>
        </div>
        <div>
          <label>First Name</label>
          <input type="text" name="firstname" required>
        </div>
        <div>
          <label>Last Name</label>
          <input type="text" name="lastname" required>
        </div>
        <div>
          <label>Email</label>
          <input type="text" name="email" placeholder="user@teamspan.com" required>
        </div>
        <div>
          <label>Username</label>
          <input type="text" name="username" required>
        </div>
        <div>
          <label>Password</label>
          <input type="password" name="password" required>
        </div>
        <div>
          <label>Street Address</label>
          <input type="text" name="street" required>
        </div>
        <div>
          <label>Town/Suburb</label>
          <input type="text" name="town" required>
        </div>
        <div>
          <label>City</label>
          <input type="text" name="city" required>
        </div>
        <div>
          <label>Phone No.</label>
          <input type="text" name="phone">
        </div>
        <div>
          <label>Landline No.</label>
          <input type="text" name="landline">
        </div>
        <div>
          <label>Gender</label>
            <select name="gender" required>
                <option disabled selected value="">Select Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
        </div>
        <div>
          <label>User Levels</label>
            <select name="user_levels" required>
                <option disabled selected hidden>Select Access Level</option>
                <option value="0">Employee</option>
                <option value="1">Administrator</option>
                <option value="2">Manager</option>
                <option value="1">HR</option>
            </select>
        </div>
        <div>
          <label>Date</label>
          <input type="text" readonly="readonly" name="date" value="<?php echo date("Y/m/d");?>" required>
        </div>
        <div>
          <label>Sick Leave</label>
          <input type="text" name="sickleave" required>
        </div>
        <div>
          <label>Vacation Leave</label>
          <input type="text" name="vacationleave" required>
        </div>
        <div>
          <label>Picture (Link)</label>
          <input type="text" name="picture" value="img/emp/" required>
        </div>
        <div>
          <label></label>
          <input type="submit" name="submit" value="Add Account" class="button" style="color: white;" />
          <a href="hr_panel.php"><input type="button" value="Back" class="button" style="color: white;" />
        </div>
      </form>
    </div>
  </div>

</div>

Because you havent put value="" in Option

Try By This

<option value="" disable hidden>Select Gender</option>