Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Listing 21.5 FormScr.htm (excerpt)—JavaScript Subroutine to Validate and Format Date

//
//////////////////////////////////////////////////////////////////////
//
// This function checks to see if the value of the object that is
// passed to it is a valid date, and then formats it.
//
function checkDate(Obj) {
//
// Grab the form element value and, if it’s a valid date, format
// it as mm/dd/yy
//
   temp = new Date(Obj.value)
   temp = formatDate(temp)
//
// If it’s not a valid date, assume that it’s mm/dd and create a
// valid date by appending the current year to it
//
   if (temp == “Invalid”) {
//
//    Parse out the month, subtracting one because JavaScript months
//    are numbered from 0 to 11
//
      temp  = Obj.value
      month = temp.substring(0,temp.indexOf(“/”)) - 1
//
//    Parse out the day of the month
//
      day = temp.substring(temp.indexOf(“/”)+1,temp.length)
//
//    Find the current year from today’s date
//
      today = new Date()
      today = formatDate(today)
      year  = today.substring(6,8)
//
//    Create a date object from the year, month, and day, and
//    format it as mm/dd/yy; if this date is still invalid,
//    then the string “Invalid” will be displayed in the form
//    element
//
      temp = new Date(year,month,day)
      temp = formatDate(temp)
   }
//
// Write back out to the form element
//
   Obj.value = temp
}

Unfortunately, JavaScript’s Date object is not smart enough to correctly interpret a date argument entered as mm/dd; you would like it to append the current year. The checkDate() function looks for dates entered as mm/dd and appends the current year to them.

If the information entered into a date field cannot be interpreted as a valid date, this function places the string Invalid in the field.

Validating Numeric Entries

Even if it would be possible to do so, you would probably not want to verify a credit card number on the client, for reasons of account security. You can perform a little bit of validation on the numeric credit card number entry, however, before the form data is sent along for final validation at the Web server. checkCCNumber(), shown in Listing 21.6, makes sure that this entry is numeric and is a proper length for a credit card number (defined here as either 13 or 16 digits, although this can be adjusted if necessary). It also formats a valid number and redisplays it; for example, a 16-digit number displays formatted as in 1234 5678 1234 5678. Like the checkDate() function, this function also puts the string Invalid in the field if the number entered is not valid.

Listing 21.6 FormScr.htm (excerpt)—JavaScript Subroutine to Validate Numerical Entry

//
//////////////////////////////////////////////////////////////////////
//
// This subroutine checks to see if the value of the object that is
// passed to it is a valid credit card number.
//
// Specify minimum and maximum length of valid credit card numbers
//
minLength = 13
maxLength = 16
//
function checkCCNumber(Obj) {
//
// Get object value
//
   temp = Obj.value
//
// Remove all embedded spaces to make sure the credit card
// number is the right length (either minLength of maxLength
// digits long)
//
   while (temp.indexOf(“ ”) > -1) {
      temp = temp.substring(0,temp.indexOf(“ ”)) +
             temp.substring(temp.indexOf(“ ”)+1,temp.length)
   }
//
// Add back embedded spaces in the appropriate spots for
// valid length numbers, else return “Invalid”
//
   if (temp.length == minLength)
      temp = temp.substring( 0, 4) + “ ” +
             temp.substring( 4, 7) + “ ” +
             temp.substring( 7,10) + “ ” +
             temp.substring(10,13)
   else if (temp.length == maxLength)
      temp = temp.substring( 0, 4) + “ ” +
             temp.substring( 4, 8) + “ ” +
             temp.substring( 8,12) + “ ” +
             temp.substring(12,16)
   else
      temp = “Invalid”
//
// Write back out to the form element
//
   Obj.value = temp
}

You will notice that the minLength and maxLength variables are defined in the preceding listing outside of the JavaScript checkCCNumber() function. This enables these variables to have a global scope, making them accessible outside of that function. In the HTML document, these variables are used to correctly print in the Web page itself the number of digits expected in the credit card number:

document.write(“<TD>(must be ” + minLength + “ or ” + maxLength +
               “ digits long)</TD>”)

---

NOTE:  Credit card numbers are not “random.” Mathematical tests can be applied at the client-side to verify that a given number is “well formed”—in other words, that a given number can or cannot be a valid credit card number for a given type of card. The checkCCNumber() function checks only the length of the number. You can read about a function for verifying that a credit card number is well formed later in this chapter in the section, “Verifying Well-Formed Credit Card Numbers.”

---

Validating Forms Before Submission

After all the information has been entered into the form and each individual entry has been validated, you might still want to perform some form-level checks before the form is submitted. You can do this in several ways. The most common way is to attach a JavaScript function to the onSubmit event of the Submit button (for example, with onSubmit=“checkForm(document. MyForm)”. If the function returns true, the form is submitted; if it returns false, it is not.

Another way to do the same thing is to attach a JavaScript function to a regular forms button—for example, onClick=“checkForm(document.MyForm)”. Then, if all the validation checks are passed, the submit() method of the HTML Form can be called to submit the form. This is how the checkForm() function, shown in Listing 21.7, is attached to the HTML Form in this example.