Check that a Textbox contains only numbers i.e. no characters allowed

Introduction:

The first validation check on form fields is always the empty field check. There really is little sense in testing the contents of a form field if it’s holding nothing. Having said that, there are other checks which can be performed on form fields.

In this example we are checking if characters have been inserted in a telephone number, form field. In this specific instance the telephone number field is expected to hold only numeric values.

This example displays a form that requires a Telephone number form field to accept only numeric values 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 telephone number is filled with non-numeric values and the Submit button is clicked an Alert with an appropriate error message 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="100%">
    <tr>
      <td>Telephone</td>
      <td><input type="text" name="txtTelephone" id="txtTelephone" 
        value="" title="Telephone" /></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:

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 txtTelephone is left empty or not.

JAVASCRIPT Code Snippet

 
<script type="text/javascript">
function validateTest(objFrm)
{
  if(objFrm.txtTelephone.value=="")
  //checking if the textbox txtTelephone is empty
  {
    alert("Telephone number cannot be left blank");
    // An alert box is popped up in the browser if it is with a message 
    //in it
    objFrm.txtTelephone.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(isNaN(objFrm.txtTelephone.value))
  //checking if the textbox txtTelephone is contain only numerical value
  {
    alert("Telephone number should only contain numeric values");
    // An alert box is popped up in the browser if it is with a message 
    //in it
    objFrm.txtTelephone.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:

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.txtTelephone.value is empty or not

• 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

• 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.txtTelephone.focus(); places the form cursor back on the txtTelephone HTML element

• 3. If objFrm.txtTelephone is not empty (i.e. txtTelephone 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 txtTelephone is not blank then control will pass to next block to check, if data entered is numeric or not

• 5. If it is not numeric then an Alert is popped up to catch the users attention and display an appropriate error message for the user to read

• 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.txtTelephone.focus(); places the form cursor back on the txtTelephone HTML element

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> Check Valid Number </title>
  <script type="text/javascript" language="javascript">
  function validateTest(objFrm)
  {
    if(objFrm.txtTelephone.value=="")
    {
      alert("Password cannot be left blank");
      objFrm.txtPassword.value="";
      objFrm.txtPassword.focus();
      return false;
    }
    else if(isNaN(objFrm.txtTelephone.value))
    {
      alert("Telephone number should only contain numeric");
      objFrm.txtTelephone.value="";
      objFrm.txtTelephone.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" cellpadding="0" cellspacing="0" >
        <tr>
          5 © Open Source Varsity. All Rights Reserved.
          <td>Telephone</td>
          <td>
          <input type="text" name="txtTelephone" id="txtTelephone" 
          value="" title="Telephone" />
          </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>
 

• < Prev
• Next >