CODEWITHSUNDEEP
javascripthtml
Hala Fadel
Hala Fadel

Reputation: 13

Using JavaScript to validate a HTML form

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!

Upvotes: 1

Views: 72

Answers (1)

Esko
Esko

Reputation: 4207

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>

Upvotes: 2

Related Questions