Check that a Textbox should accept minimum 8 characters

Introduction:

In this example we are checking to ensure that a password form field only accepts a password if its length 8 or more alpha numeric characters. This ensures that a user will always have to enter a password with minimum 8 characters length or else the password will be rejected and not dispatched to the 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 length of the password is less than 8 alpha numeric characters and the Submit button is clicked an Alert with an appropriate error message 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>Password</td>
      <td><input type="text" name="txtPassword" id="txtPassword" 
      value="" title="Password" /></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 txtPassword is left empty or not.

The JAVASCRIPT Code Snippet

 
<script type="text/javascript">
  function validateTest(objFrm)
  {
    if(objFrm.txtPassword.value=="")
    //checking if the textbox txtPassword is empty
    { 
      alert("Password cannot be left blank");
      // An alert box is popped up in the browser if it 
      //is with a message in it
      objFrm.txtPassword.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
    } 
    else if(objFrm.txtPassword.value.length < 8)
    { 
      alert("Password length should be minimum 8
      character");
      // An alert box is popped up in the browser if it is 
      //with a message in it
      objFrm.txtPassword.value="";
      //Blanks the password field for security purpose
      objFrm.txtPassword.focus();
      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.txtPassword.value is empty or not

if(objFrm.txtPassword.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("Password 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.txtPassword.focus(); places the form cursor back on the txtPassword HTML element

objFrm.txtPassword.focus();

3. If objFrm.txtPassword is not empty (i.e. txtPassword 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.

4. If txtPassword is not blank then control will pass to next block to check, if password entered is of minimum 8 characters or not

else if(objFrm.txtPassword.value.length < 8)

5. If it is less than 8 characters then an Alert is popped up to catch the users attention and display an appropriate error message for the user to read

alert("Password length should be minimum 8 characters ");

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

7. Then objFrm.txtPassword.focus(); places the form cursor back on the txtPassword HTML element

objFrm.txtPassword.focus();

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 Of This Example

 
<html>
  <head>
  <title> Check Valid Number </title>
  <script type="text/javascript" language="javascript">
  function validateTest(objFrm)
  {
    if(objFrm.txtPassword.value=="")
    { 
      alert("Password cannot be left blank");
      objFrm.txtPassword.value="";
      objFrm.txtPassword.focus();
      return false;
    } 
    else if(isNaN(objFrm.txtPassword.value))
    { 
      alert("Password should only contain numeric");
      objFrm.txtPassword.value="";
      objFrm.txtPassword.focus();
      return false;
    } 
    else
    { 
      return true;
    }
  }
  </script>
  </head>
 
  <body>
  <form name="frmTest" id="frmTest" method="post" action="" 
  onsubmit="return validateTest(document.frmTest);">
  <table id="tblTest" >
    <tr>
      <td>Password</td>
      <td><input type="text" name="txtPassword" id="txtPassword" 
      value="" title="Password" /></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>