Using JavaScript to validate a HTML form

Question

I'm fairly new to JavaScript and HTML. I am trying to validate a feedback HTML form using JavaScript. Although the code should display alerts if the input boxes are empty, no alerts are shown. I have researched the issue and made amendments to my code, however none of these seem to have worked.

JavaScript code:

function validateForm() {
  var firstName = document.forms['feedback']['firstName'].value;
  if (firstName == null || firstName == "") {
    alert("First name is required");
    return false;
  }
  var lastName = document.forms['feedback']['lastName'].value;
  if (lastName == null || lastName == "") {
    alert("Surname is required");
    return false;
  }
  var email = document.forms['feedback']['email'].value;
  if (email == null || email == "") {
    alert("Email address is required");
    return false;
  }
  var date = document.forms['feedback']['date'].value;
  if (date == null || date == "") {
    alert("Date accessed is required");
    return false;
  }
  var tips = document.forms['feedback']['tips'].value;
  if (tips == null || tips == "") {
    alert("Web design tips is required");
    return false;
  }
  return true;
}

HTML code:

<form name="feedback" onsubmit="return validateForm">
  First name: <input type="text" name="firstName" id="firstName">
  <br /> Surname: <input type="text" name="lastName" id="lastName">
  <br /> Email address: <input type="text" name="email" id="email">
  <br /> Date accessed: <input type="date" name="date" id="date">
  <br /> Web design tips: <textarea name="tips" id="tips"></textarea>
  <br />
  <button>Submit</button>
</form>

Thanks in advance!

Answer 1

You are not actually calling your function, you should have return validateForm(); to call it:

 function validateForm() { var firstName = document.forms['feedback']['firstName'].value; if (firstName == null || firstName == "") { alert("First name is required"); return false; } var lastName = document.forms['feedback']['lastName'].value; if (lastName == null || lastName == "") { alert("Surname is required"); return false; } var email = document.forms['feedback']['email'].value; if (email == null || email == "") { alert("Email address is required"); return false; } var date = document.forms['feedback']['date'].value; if (date == null || date == "") { alert("Date accessed is required"); return false; } var tips = document.forms['feedback']['tips'].value; if (tips == null || tips == "") { alert("Web design tips is required"); return false; } return true; } 

 <form name="feedback" onsubmit="return validateForm();"> First name: <input type="text" name="firstName" id="firstName"> <br /> Surname: <input type="text" name="lastName" id="lastName"> <br /> Email address: <input type="text" name="email" id="email"> <br /> Date accessed: <input type="date" name="date" id="date"> <br /> Web design tips: <textarea name="tips" id="tips"></textarea> <br /> <button>Submit</button> </form>