My form validation isnt working, issue with the JS or html. for uni work

Question

I tried to keep it simple but not sure what's wrong. I'm not sure if the return command is working or not, the button might be messing it up but not sure.

I'm new to HTML and JS and my tutor was unable to help. I've double read everything but still cant find anything conclusive. Any help would be great thanks.

function validatebookclass() {

  var accountname = document.getElementById("username");
  var accountpassword = document.getElementById("password");
  var coursetype = document.getElementById("ctype");
  var numberofattendees = document.getElementById("numb");
  var date = document.getElementById("date");
  var timeselect = document.getElementById("time");
  var ingredientsdelivered = document.getElementById("ingd");
  var dietry = document.getElementById("diet");

  if (accountname.value == "" || accountpassword.value == "" || coursetype.value == "" || numberofattendees.value == "select" ||
    date.value == "" || timeselect.value == "pick" || ingredientsdelivered.value == "" || dietry.value == "") {

    alert("Please fill in all fields");
    return false;
  } else {
    alert("Thank you for booking.");
    true;
  }
}

<form name="bookclass" onsubmit="return validatebookclass()" method="post">

  <h id="ftitle"> Username:</h>
  <input type="text" name="username" size="30" placeholder="Enter username here...">

  <label for="password"> Password:</label>
  <input type="Password" name="password" size="30" placeholder="Enter password here..."><br><br>

  <label for="ctype"> Course Type:</label><br> Introductory
  <input type="radio" name="ctype" value="introct"><br> Amateur <input type="radio" name="ctype" value="amact"><br> Professional <input type="radio" name="ctype" value="proct"><br><br>

  <label for="numb"> Number of attendees:</label> <br>
  <select name="numb">
    <option value="select">Select</option>
    <option value="one">One</option>
    <option value="Two">two</option>
  </select>

  <br><br>

  <label for="date"> Time Slot:</label><br>
  <input type="date" name="date">
  <select name="time">
    <option value="pick">Select</option>
    <option value="10am-1pm">10am-1pm</option>
    <option value="11am-2pm">11am-2pm</option>
    <option value="12pm-3pm">10am-1pm</option>
    <option value="1pm-4pm">11am-2pm</option>
    <option value="2pm-5pm">10am-1pm</option>
  </select>

  <br><br>

  <label for="ingd"> Ingredients delivered:</label><br> Yes
  <input type="radio" name="ingd" value="yes"> No
  <input type="radio" name="ingd" value="no"><br>

  <p id="bclass">If yes, you will be emailed with a further form to fill out.</p>

  <label for="diet">Dietry Restrictions:</label><br> Gluten Free<input type="checkbox" name="diet" value="gf"> Nut-free <input type="checkbox" name="diet" value="nf"> <br> dairy-free
  <input type="checkbox" name="diet" value="df"> Other <input type="checkbox" name="diet" value="other"><br> None <input type="checkbox" name="diet" value="none">

  <br>

  <button type="submit">Submit</button>

</form>

Answer 1

Your JavaScript is trying to get elements by their id, but your form elements use the name attribute instead of https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

Change the name attributes to Add id attributes in your HTML to match the IDs used in the JavaScript

Or you can use getElementsByName https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

Also in else block you forgot about return