Form validation

Introduction

Form validation is the process of checking that a form has been filled in correctly before it is sent. It is important to validate the form before submitting it to the server. This can be done by using JavaScript.

When a form is submitted, the browser will call the onsubmit event handler. This event handler can be used to validate the form before it is submitted. If the form is not valid, the event handler can return false to prevent the form from being submitted.

HTML form:

<form onsubmit="return validateForm()">
  <input type="text" name="name" id="name">
  <input type="submit" value="Submit">
</form>

JavaScript function:

function validateForm() {
  var name = document.getElementById("name").value;
  if (name == "") {
	alert("Name must be filled out");
	return false;
  }
  else {
	return true;
  }
}

Open in new tab

Notice that in the last line, the function returns false if the name field is empty. This will prevent the form from being submitted.
If the name field is not empty, the function will return true and the form will be handled normally.

Validating date

<form onsubmit="return validateDate()">
  <input type="date" name="date" id="date">
  <input type="submit" value="Submit">
</form>

<script>function validateDate() {
  var date = document.getElementById("date").value;	// get date from input field
  var inputDate = new Date(date);			// convert input date to Date object
  var today = new Date();				// get current date
  if (inputDate <= today) {
	alert("Please select a future date");
	return false;
  }
  else {
	alert("Date is valid");
	return true;
  }
}
</script>

Validating multiple fields

The following form has three fields: name, email, and interests.
The interests field is a group of checkboxes. The form is validated to ensure that all fields are filled out and at least one interest is selected.
Flag checked is used to indicate whether at least one interest is selected.

<form onsubmit="return validateForm()">
  <input type="text" name="name" id="name" placeholder="Name"><br>
  <input type="email" name="email" id="email" placeholder="Email"><br>
  <input type="checkbox" name="interests" id="interests1" value="sports"> Sports<br>
  <input type="checkbox" name="interests" id="interests2" value="music"> Music<br>
  <input type="checkbox" name="interests" id="interests3" value="movies"> Movies
  <input type="submit" value="Submit">
</form>

<script>function validateForm() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var interests = document.getElementsByName("interests");
  var checked = false;						// Default status is "not checked"
  for (var i = 0; i < interests.length; i++) {
	if (interests[i].checked) {				// If any interest is checked
	  checked = true;					// Change status to "checked"
	  break;						// Stop checking
	}
  }
  if (name == "") {						// If name is empty
	alert("Name must be filled out");
	return false;
  }
  else if (email == "") {					// If email is empty
	alert("Email must be filled out");
	return false;
  }
  else if (!checked) {						// If no interest is checked
	alert("Please select at least one interest");
	return false;
  }
}
</script>

Remark

Form validation is important to ensure that the data submitted by the user is correct.
It can be done using JavaScript to check the form before it is submitted to the server.

BUT it is not secure because JavaScript can be disabled in the browser.
To ensure data integrity, the form should be validated on the server side as well.

Task

Create a form with the following fields:

Name: text input
Gender: radio button
Age: text input
Submit button

Use event listener to validate the form before submitting it. Validation rules: