FORM VALIDATION

If you have not yet read about forms yet, please FORMS HELP. If you are not familiar with javascript then you can learn a bit about it by going to my javascript tutorial. Not all the javascript codes will be explained in on this page.

Forms will use the ACTION and METHOD format and may include an onSubmit="..." like this:

<form name="form-name" method="post" action="URL" onsubmit="return javascript-function">

The forms on this page do not have the ACTION attribute in them. If you copy & paste the codes into one of your files, it will not work, i.e. the form will not go anyplace! You will have to add the METHOD and ACTION attributes of the form.

This page will explain the basics of form validation:

Floating Point Number Validation
I will start off with the validation of a floating point number. For example:

Enter a floating point number between 9 and 111:

Several important thing to note in this code:

  1. for (i=0; i < thisfloat.length; i++) - is a loop. It begins with the counter, i, set to zero, 0, and each time it checks to see if i is less than the value of thisfloat.length, the number of characters in the number. If this is true then it check the if condition. If it is true, it increases i by 1 and continues checking the if condition.
  2. The || - mean or
  3. The case of the function name should remain the same in both the javascript and the call to it.
  4. The name of the form, formfloat must be in the call to the checking function, CheckFloating in the form.
  5. formfloat - is the name of the form and must be included in the form. But you can use any name you wish as long as the name is the same in the form and the javascript.
  6. lower & upper values - they must be in the correct order.
  7. alert("Floating Point Number Is OK!") - may be removed if you do not need the validation, true, to be shown.
  8. return false // remove this line! - SHOULD BE REMOVED as I have it in there only so the page will not reload when the value is true.

Character Validation
Here is a simple example of character validation. In this example I only check to see if the characters are any upper or lower case letter or a space.

Enter up to 20 upper/lower case letter and/or a space:

Again, there are several important things to note in this code:

  1. The form name, checkcharacters, must be present but can be any name you wish.
  2. The name of the input box to check is characters. If you wish to use a different name then you must change it in the javascript script function as well as the form.
  3. Other valid characters may be used by adding a && between each characters or set of characters. If you are using from a character to a character, like I did with the "a" || "z", then be sure that all characters in this range are valid.
  4. The last two lines of code, the Alert and the return false may be eliminated.

Email Address Validation
Email validation is a bit more complicated due to the number of things that must be checked,

Enter Your Email:

Here I use the special javascript element, indexOf("character:,starting-position), where character can be an valid keyboard character and starting-positon will default to the 1st character in the characters that are being checked but may be set to any position within the length of the characters.

Please note that the position of a character in the total characters is the nth positon - 1 as the script will start counting from the 1st position as number 0, e.g. if there are 12 characters then the 1st character position is 0 and the last positon is 11!

Again, the form name must be used in the call between the () and then name of the email address entry must be email. It may be changed to any other name you wish but it must be the same in the form and the javascript code.

Radio & Check Box Button Validation
Radio buttons (small o)or check boxes, small boxes, can be validated to make sure that the radio button response has been selected and at least one of the check boxes has been selected.

Select A City:
Houston Detroit Atlanta New York

Please check one of these boxes:
Sports TV

List Item Validation

Select Your Main Entree:

Validating Several Entries
Suppose you wish to validate both the name and email at the same time on the form. Then you would place this code in your page:

<script language="javascript">
function checkForm() {
if ( (VerifyName()) && (VerifyEmail()) ) {
  return true
  }
  return false
}
function VerifyName() {
....the code
}
functon VerifyEmail() {
....the code
}
</script>

<body>
<form method=post action="url" onsubmit="return checkForm()">

In the javascript, the && means both the name and the email have to be true in order for the form to be sent.