Wise Old Man's Help Page

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 Numbers

Characters

Email Address

Radio & Check Box Buttons

List Item

Validating Several Entries

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:

<HTML>
<HEAD>
<script language="javascript">
<!--
function CheckFloating(thisform, lower, upper) {
var thisfloat = thisform.floatnumber.value
for (i=0; i < thisfloat.length; i++) {
    var ch = thisfloat.substring(i,i+1)
    if ( (ch < "0" || "9" < ch) && ch !=".") {
      alert ( "Invalid Floating Point Number!")
       thisform.floatnumber.focus()
       return false
           }    
    }
if (lower == upper) {
    return true}
  else { 
if (thisfloat < lower || upper < thisfloat) {
     alert("This number must be in the range, " + lower + " <= X <= " + upper)
      thisform.floatnumber.focus()
      return false
       }
  }

alert("Floating Point Number Is OK!")
return false // remove this line!
}
-->
</script>
</HEAD>
<BODY>
<form name="formfloat" onsubmit="return CheckFloating(formfloat, 10, 110)">
Enter a floating point number between 9 and 111: <input type="text" name="floatnumber" size=6>
<p>
<input type="submit" value="Check the year"> <input type="reset" value="Reset Form">
</form>
</BODY>
</HTML>

Several important thing to note in this code:

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.
The || - mean or
The case of the function name should remain the same in both the javascript and the call to it.
The name of the form, formfloat must be in the call to the checking function, CheckFloating in the form.
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.
lower & upper values - they must be in the correct order.
alert("Floating Point Number Is OK!") - may be removed if you do not need the validation, true, to be shown.
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:

<HTML> <HEAD> function CheckCharacters(thisform) { if ( thisform.characters.value == "" ) { alert ( "Please Enter Data") thisform.characters.focus() return false } var str = thisform.characters.value var slen = str.length for (i=0; i < slen; i++) { var ch = str.substring(i,i+1) if ( (ch < "a" || "z" < ch) && (ch < "A" || "Z" < ch) && ch != " ") { alert("The " + (i+1) + "th Character Is Invalid!") thisform.characters.focus() return false } } alert("Vaild Entry") // optional alert return false // remove this line of code for normal use } </script> <BODY> <form name="checkcharacters" onsubmit="return CheckCharacters(checkcharacters)"> Enter up to 20 upper/lower case letter and/or a space: <p><input type="text" name="characters" size=12 maxlength=20> <p> <input type="submit" value="Check The Characters"> <input type="reset" value="Reset Form"> </form> </BODY> </HEAD>

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

The form name, checkcharacters, must be present but can be any name you wish.
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.
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.
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,

is there a name before the @;

is there a period after the @ sign;

are there three characters after the @.

<HTML> <HEAD> <script language="javascript">  </script> </HEAD> <BODY> <form name="emailform" onsubmit="return VerifyEmail(emailform)"> Enter Your Email: <input type="text" name="email" size=25> <p> <input type="submit" value="Submit"> <input type="reset" value="Reset Form"> </form> </BODY> </HEAD>

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

<HTML> <HEAD> <script language="javascript">  </script> </HEAD> <BODY> <form name="radiocheckboxform" onsubmit="return RadioCheckboxForm(radiocheckboxform)"> <B>Select A City:</B> <br> <Input type="radio" name="city" value="Houston"> Houston <Input type="radio" name="city" value="Detroit"> Detroit <Input type="radio" name="city" value="Atlanta"> Atlanta <Input type="radio" name="city" value="New York"> New York <p> <B>Please check one of these boxes:</B> <br> <input type="checkbox" name="sports"> Sports <input type="checkbox" name="tv"> TV <p> <input type="submit" value="Submit"> <input type="reset" value="Reset Form"> </form> </BODY> </HTML>

List Item Validation

Select Your Main Entree:

<HTML> <HEAD> <script language="javascript">  </script> </HEAD> <BODY> <form name="selectform" onsubmit="return checkSelect()"> Select Your Main Entree:<Br> <select name="thislist" size=1> <option value="Select From This List">Select From This List <option value="Fish">Fish <option value="Turkey">Turkey <option value="Pork">Pork <option value="Chicken">Chicken <option value="Vegetables">Vegetables </select> <input type="submit" value="Submit it"> </form> </BODY> </HTML>

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:

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