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

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 firstdata 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 Alert will be displayed as shown in diagram 2.

Diagram2

HTML Code Snippet

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

Elements used in the HTML code snippet are:

Form
Textbox
Button

Description of each element

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
Textbox: It’s one of the many HTML data capture elements. It is used to capture text based, user data
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
    {
      alert("Username cannot be left blank");
      // An alert box is popped 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
    }
  }
</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:

The Javascript code is contained in the function validateTest(); This is passed the HTML form id frmTest as its argument
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
Testing if objFrm.txtUsername.value is empty or not

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

1. If it is empty then an Alert is popped up to catch the users attention and display an appropriate error message for the user to read

 
alert("Username cannot be left blank");

2. Since an Alert is a modal window all processing will stop until the User responds to the Alert by clicking on the Alert’s Ok button
Then objFrm.txtUsername.focus(); places the form cursor back on the txtUsername HTML element

 
objFrm.txtUsername.focus();

3. 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.

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
      {
        alert("Username cannot be left blank");
        // An alert box is popped 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
      }
    }
  </script>
 
</head>
 
<body>
  <form name="frmTest" id="frmTest" method="post" action="" 
  onsubmit="return validateTest(document.frmTest);">
    <table id="tblTest" width="100%">
      <tr>
        <td>Username</td>
        <td><input type="text" name="txtUsername" id="txtUsername" 
        value="" title="Email" class="textbox" /></td>
      </tr>
      <tr>
        <td><input type="submit" name="btnSubmit" id="btnSubmit" 
        value="Submit" /></td>
        <td><input type="reset" name="btnCancel" id="btnCancel" 
        value="Cancel" /></td>
      </tr>
    </table>
  </form>
</body>
</html>