Using Inline Form Validation

By Eddie Machaalani

Javascript alert boxes have long been used for validating HTML forms. For example, if you forget to type your name into a contact form, then a Javascript alert pops up telling you about your error and how to correct it. While this is a lot better than no warning message or validation at all, I find alert messages quite annoying, ugly and outdated.

What I'd like to do in this article, is show you a more elegant way of displaying error messages cleanly, using some easy to implement Javascript. This not only makes your forms a lot cleaner and more usable, but also shows your attention to detail as a web designer.

Here’s what the finished product will look like. Notice the error message is displayed in red on the form itself:


First, we start with a simple form. I’ve kept it basic on purpose so that you can easily modify or add to it if the need arises.

Below we have a basic contact form that collects a visitors name, email address and comments.
Note that this article doesn’t discuss the server-side code needed to actually capture and send the form, but rather it discussed the client-side validation of the form data.

<form method=post action="myscript.php">
<span class=label>Name:</span><input type=text value=""><br>
<span class=label>Email:</span><input type=text value="" id=email><br>
<span class=label>Comment:</span>
<textarea type=text value=""></textarea><br>
<input type=submit value=Submit style="margin-left: 50px">
</form>

There's nothing special about this form. I've used some <span> tags for spacing and formatting purposes (In the CSS code which I'll show you later).

What we need to do now is simply attach ID's to each form element. An ID is a unique name we give to each form element, which Javascript can use to identify every form element separately so that it can retrieve it's value and properties.

For example:
<span class=label>Name:</span><input type=text value="" id=name ><br>

The error messages are simply <div> tags that have been hidden using the CSS attribute, display:none. So essentially, these <div> tags will be loaded but hidden. However, when we find that a form field is empty, we will show the hidden <div>, which will contain an error message:

<form method=post action="myscript.php">
<span class=label>Name:</span>
<input type=text value="" id=name><br>
<div class=error id=nameError>Required: Please enter your name<br></div> <br>
<span class=label>Email:</span><input type=text value="" id=email><br>
<div class=error id=emailError>Required: Please enter your email address<br></div> <br>
<span class=label>Comment:</span><textarea type=text value="" id=comment></textarea><br>
<div class=error id=commentError>Required: Please enter a comment<br></div> <br>
<input type=submit value=Submit style="margin-left: 50px">
</form>

Now, on to the Javascript that validates the form objects. For the sake of clarity, I'll only describe code for one form element, the Name field. You can get the entire source code at the end of this article.

Firstly, we need to call the Javascript checkForm function when we post the form:
<form onSubmit="return checkForm();" method=post action="myscript.php">

By using a return attribute, if the validation of the form fails, the form will not be submitted. If the validation returns true, however, then the form will be submitted as normal.

The checkForm function checks to make sure that all required form fields are complete. If not, we display an error message next to the corresponding field and set the focus of the cursor back into the form field with the error:
function checkForm() {
name = document.getElementById("name").value;
if (name == "") { document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
  return false;
  }
  return true;
}

When adding the additional data validation, I've created a separate function to hide all other error messages so that we only see one error message at a time. This is critical so that you don't overwhelm your visitor with many error messages at once. This also simplifies the process of re-checking if data is actually correct.

And there you have it – easy form validation without any annoying Javascript alert messages. The complete source code is shown below, and as you can see, form validation doesn't necessarily have to be ugly and tedious:



<html>
<style>
  input {
  width: 200px;
  font-family: Tahoma;
  font-size: 8pt;
  }
 
  .label {
width:50px;
  }
 
  textarea {
width: 200px;
  font-family: Tahoma;
  font-size: 8pt;
  }
   
  body {
font-family: Tahoma;
  font-size: 8pt;
  }

  .error {
  font-family: Tahoma;
font-size: 8pt;
  color: red;
  margin-left: 50px;
  display:none;
  }
 
</style>
 
<script>
  function checkForm() {
name = document.getElementById("name").value;
  email = document.getElementById("email").value;
  comment = document.getElementById("comment").value;
 
  if (name == "") {
  hideAllErrors();
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
  return false;
  } else if (email == "") {
hideAllErrors();
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
  return false;
  } else if (comment == "") {
hideAllErrors();
document.getElementById("commentError").style.display = "inline";
document.getElementById("comment").select();
document.getElementById("comment").focus();
  return false;
  }
  return true;
  }
 
  function hideAllErrors() {
document.getElementById("nameError").style.display = "none"
document.getElementById("emailError").style.display = "none"
document.getElementById("commentError").style.display = "none"
  }
</script>
 
<body>
<form onSubmit="return checkForm();" method=post action="myscript.php">
<span class=label>Name:</span><input type=text value="" id=name><br>
<div class=error id=nameError>Required: Please enter your name<br></div><br>
<span class=label>Email:</span><input type=text value="" id=email><br>
<div class=error id=emailError>Required: Please enter your email address<br></div><br>
<span class=label>Comment:</span><textarea type=text value="" id=comment></textarea><br>
<div class=error id=commentError>Required: Please enter a comment<br></div><br>
<input type=submit value=Submit style="margin-left: 50px">
</form>
</body>
</html>