Check that a Textbox that must be filled in is not left empty using error DIV

Introduction:

Often websites require a form to be filled in by a visitor. This could be a simple Login and Password combination form or a more extensive form that requires the visitor to fill in a Billing and/or Shipping address which includes a phone number in some purchase transaction.

A visitor can simply ignore filling in the form and continue the Login process which will fail or continue the purchase process that will also fail.

To ensure that such website processes continue successfully it’s important to have some sort of client side data validation process that ensures that all mandatory fields on a data entry form are filled in with data and not left empty.

The empty form field check is always the first data validation check carried out. It makes sense to apply all other data validation checks only if the form field in actually filled in with some data.

This example displays a form that requires a Username to be filled in before its dispatch to a Web server for further processing. The look and feel of the form is as shown in diagram 1.

Diagram1

The first snippet of code described is the HTML responsible for rendering the form in the visitor’s browser as shown in diagram 1.

If the username is left empty and the Submit button is clicked an error div will be displayed as shown in diagram 2.

Diagram2

The HTML Code snippet

 
<form name="frmTest" id="frmTest" method="post" action="" 
onsubmit="return validateTest(document.frmTest);">
  <table id="tblTest" width="">
    <tr>
      <td colspan="2">
        <div id="error"></div>
      </td>
    </tr>
    <tr>
      <td>Username</td>
      <td>
        <input type="text" name="txtUsername" id="txtUsername" 
        value="" title="Email" />
      </td>
    </tr>
    <tr>
      <td> </td>
      <td>
        <input type="submit" name="btnSubmit" id="btnSubmit" 
        value="Submit" />
 
        <input type="reset" name="btnCancel" id="btnCancel" 
        value="Cancel" />
      </td>
    </tr>
  </table>
</form>
 

Elements used in the HTML code snippet are:

1. Form
2. Textbox
3. Button

Description of each element

1. Form: A form object is defined in HTML between the <FORM></FORM> tags. The form object will normally enclose holds various data capture HTML elements like Textboxes, Textareas, Combo-boxes, Radio buttons, Checkboxes and so on
2. Textbox: It’s one of the many HTML data capture elements. It is used to capture text based, user data
3. Button: A button is considered an HTML data control element. It’s usually used to perform some sort of controlling action such as submitting the form data captured to a Web server for further processing, resetting the form data to datum and so on.

In the form frmTest the Javascript function validateTest(document.frmTest) is called when the Submit button is clicked. This is how that happens:

When the Submit button is clicked, the frmTest onsubmit method is automatically invoked which in turn invokes the Javascript function validateTest(); The form is passed to this Javascript function as the parameter - document.frmTest. Hence the function validateTest(); operates on document.frmTest.

It’s the signature of validateTest(); that tests if txtUsername is left empty or not.

JAVASCRIPT Code Snippet

 
<script type="text/javascript">
function validateTest(objFrm)
{
  if(objFrm.txtUsername.value=="")
  //checking if the textbox txtUsername is empty
  {
    document.getElementById("error").style.display="block";
    //A div is visible on blank condition only
 
    document.getElementById("error").innerHTML = "
    <div style='text-align:right;'>
      <a href='#' onclick='closeDiv()'><img src='close.png'/></a>
    </div>
    Username cannot be left blank";
    // A div is shown up in the browser if it is with a message in it
 
    objFrm.txtUsername.focus();
    //Once the user responds to the alert the cursor is 
    //placed in the textbox again
 
    return false;
    //The value false is returned to the function 
    //so that form submission is aborted
  }
  else
  {
    return true;
    // The value true is returned to the function 
    //so that form submission goes through
  }
}
 
function closeDiv()
{
  document.getElementById("error").style.display="none";
  // The error div’s display set to none
}
</script>
 

NOTE: While Javascript code can be included anywhere in the HTML codespec it is prudent that Javascript is always written within the <HEAD></HEAD> HTML tags.

To separate Javascript code from HTML code it is always placed within the <script></script> that are normally placed within <HEAD></HEAD> HTML tags.

The <SCRIPT> tag has following attributes:
type: It specifies MIME type of script
src: Specifies the URL of an external Javascript file if one is used

Working of the Javascript code:

1. The Javascript code is contained in the function validateTest(); This is passed the HTML form id frmTest as its argument
2. objForm is the handle to HTML form object. It is a collection of HTML elements that are enclosed within the <FORM></FORM> tags. Using the handle objFrm all the elements within frmTest can be accessed
3. Testing if objFrm.txtUsername.value is empty or not

 
if(objFrm.txtUsername.value=="")
 

4. If it is empty then an div is being shown to catch the users attention and display an appropriate error message for the user to read
5. Div will have close button, if user clicks close button, div will disappear
6. Then objFrm.txtUsername.focus(); places the form cursor back on the txtUsername HTML element

 
objFrm.txtUsername.focus();
 

7. If objFrm.txtUsername is not empty (i.e. txtUsername contains something), then control will pass to else block of the if condition. This will return the value TRUE to the onsubmit method of the form object and the form’s contents will get submitted to the Web server for further processing.
8. NOTE: In this specific case nothing else will happen because the form’s ACTION attribute is loaded with the # symbol. Normally value passed to the ACTION attribute of the form is the name of the program at the Web server that will process the data submitted by the form to the Web server. In this case since the ACTION attribute holds # the Web server will receive the data submitted by the form by will do nothing further.

The Complete Code snippet

 
<html>
<head>
  <title> Blank Textbox Check </title>
  <style>
    body
    {
      font-family:Tahoma,Verdana, Arial, Helvetica, sans-serif;
      font-size:9pt;
      color:#000000;
    }
  </style>
 
  <script type="text/javascript">
  function validateTest(objFrm)
  {
    if(objFrm.txtUsername.value=="")
    //checking if the textbox txtUsername is empty
    {
      document.getElementById("error").style.display="block";
      //A div is visible on blank condition only
 
      document.getElementById("error").innerHTML = "
      <div style='text-align:right;'>
        <a href='#' onclick='closeDiv()'><img src='close.png'/></a>
      </div>
      Username cannot be left blank";
      // A div is shown up in the browser if it is with a message in it
 
      objFrm.txtUsername.focus();
      //Once the user responds to the alert the cursor is 
      //placed in the textbox again
 
      return false;
      //The value false is returned to the function 
      //so that form submission is aborted
    }
    else
    {
      return true;
      // The value true is returned to the function 
      //so that form submission goes through
    }
  }
 
  function closeDiv()
  {
    document.getElementById("error").style.display="none";
    // The error div’s display set to none
  }
  </script>
</head>
<body>
  <form name="frmTest" id="frmTest" method="post" action="" 
  onsubmit="return validateTest(document.frmTest);">
    <table id="tblTest" width="">
      <tr>
        <td>Username</td>
        <td><input type="text" name="txtUsername" id="txtUsername" 
        value="" title="Email" class="textbox" /></td>
      </tr>
      <tr>
        <td> </td>
        <td>
        <input type="submit" name="btnSubmit" id="btnSubmit" 
        value="Submit" class="" />  
        <input type="reset" name="btnCancel" id="btnCancel" 
        value="Cancel" class="" /></td>
      </tr>
    </table>
  </form>
</body>
</html>
 

• < Prev
• Next >