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

In this example, whenever the information in the text field named PayDate is changed, the JavaScript checkDate() function is called. The argument of the checkDate() function, in this case, is the text field object (assuming that the name of the form is MyForm).

Prefilling Entries

The only apparent change from the unscripted to scripted version of this example in Figure 21.2 is that the payment date has been prefilled. Because an obvious default entry exists for this field—the current date—it makes sense to enable JavaScript to do this and save the user a little bit of effort. This is done by executing the JavaScript statements shown in Listing 21.2 when the document is loaded:

Listing 21.2 FormScr.htm (excerpt)—Prefilling Entries Makes Your Pages Easier to Use and Less Error Prone

//
//////////////////////////////////////////////////////////////////////
//
// This function formats a date as mm/dd/yy.
//
function formatDate(dateVar) {
   newDate = dateVar.toLocaleString()
   newDate = newDate.substring(0,newDate.indexOf(“ ”))
   return newDate
}
//
// Prefill payment date with current date
//
today = new Date()
document.MyForm.PayDate.value = formatDate(today)

FIGURE 21.2  Other than having the payment date entry prefilled, this JavaScripted form doesn’t look very different from the unscripted version.

---

NOTE:  The complete listings of this HTML document and all the other documents used in this chapter are on the accompanying CD-ROM in the file named FormScr.htm.

---

The today variable is set equal to a JavaScript Date object containing the current date. The formatDate() function takes a Date object as an argument and returns a string with the date in the format “mm/dd/yy”.

Note that the user can change this entry, picking a payment date that is after the current date. You might not want to allow the user to select a payment date prior to the current date, however—if his payment is late, for instance, you don’t want him to be able to “predate his check.” You can easily prevent this with JavaScript, as will be shown later in this chapter.

Formatting Proper Name Entries

Listing 21.3 shows the JavaScript function capitalizeName(). This function formats a proper name entry by capitalizing the first letter. This is not terribly important to do as forms validation topics go, but it is a nicety. Another feature of this function (included here because of personal bias), is that it also capitalizes the letter immediately following an apostrophe.

Listing 21.3 FormScr.htm (excerpt)—JavaScript Subroutine to Format Proper Name Entries

//
// This function capitalizes proper names; it also capitalizes the
// letter after the apostrophe, if one is present
//
function capitalizeName(Obj) {
//
// Set temp equal to form element string
//
   temp  = new String(Obj.value)
   first = temp.substring(0,1)
   temp  = first.toUpperCase() + temp.substring(1,temp.length)
   apnum = temp.indexOf("‘")
   if (apnum > -1) {
      aplet = temp.substring(apnum+1,apnum+2)
      temp  = temp.substring(0,apnum) + "‘" +
              aplet.toUpperCase() +
              temp.substring(apnum+2,temp.length)
   }
   Obj.value = temp
}

Validating and Formatting Currency Entries

Listing 21.4 shows the JavaScript function checkAmount(). This function validates and formats an entry meant to be an amount of money. Primarily, this entry needs to be a numeric value, but it is a little more forgiving than that; it will remove a leading dollar sign if the user has put one in. Then, after making sure that the value is numeric, the subroutine formats it as dollars and cents and writes it back out to the form field from which it came.

Listing 21.4 FormScr.htm (excerpt)—JavaScript Subroutine to Validate and Format Currency

//
//////////////////////////////////////////////////////////////////////
//
// This function checks to see if the value of the object that is
// passed to it is a valid currency, and then formats it.
//
function checkAmount(Obj) {
//
// Set temp equal to form element string
//
   temp = new String(Obj.value)
//
// Remove leading $, if present
//
   temp = temp.substring(temp.indexOf(“$”)+1,temp.length)
//
// Convert into a floating point number and format as dollars
// and cents
//
   temp = parseFloat(temp)
   temp = Math.floor(100*temp)/100
   temp = String(temp)
   if (temp.indexOf(“.”) == -1) {
      temp = temp + “.00”
   }
   if (temp.indexOf(“.”) == temp.length -2) {
      temp = temp + “0”
   }
//
// If zero value, make blank
//
   if (temp == “0.00”) {
      temp = “”
   }
//
// Write back out to the form element
//
   Obj.value = temp
}

If you are not familiar with JavaScript, you might be confused a little by the checkAmount() function because it seems to treat the same variable alternatively as a number or as a string. Because JavaScript enables its variables to have their types changed dynamically, you can use the same variable to store any kind of data that JavaScript recognizes. JavaScript generally treats data as the subtype—such as integer, floating point, or string—appropriate to the operation.

As a final note, you see that for an entry incorrectly formatted, checkAmount() will blank the entry. How your JavaScripts respond to incorrect entries is up to you. You can remove the incorrect entry—as is done in this example—leave it but set an error flag that prevents the form from being submitted until it is corrected, bring up an Alert box, or anything else you would like to do.

Validating and Formatting Date Entries

The checkDate(), shown in Listing 21.5, is similar to checkAmount(), except that it validates a correct date entry rather than amount. If the user inputs the date as requested, in the form mm/dd/yy, this value can be passed to the JavaScript Date object, which will return a valid Date object with that date; then the formatDate() function can be called to format the date as desired.