JavaScript - Webtop Reference
Updated: 20 March 2006

Date Validation

JavaScript can validate a form data's integrity before anything is submitted back to the web server, virtually eliminating the need for wasted bandwidth (network traffic).

For pedagogical purposes, let's assume we're the DMV (Department of Motor Vehicles) and we want to let people apply for a driver's license online. One important question to ask is "What is your birthday?" just to make sure they're old enough to be applying for a driver's license. But, we don't want to stick up a plain text box since some applicants might type "1/5/75" to mean January 5, 1975 (using American syntax) or May 1, 1975 (using European syntax). Of course, we shouldn't allow two-digit years since that's the cause of the Year 2000 (Y2K) bug, but that's an entirely different story.

To prevent these types of misunderstandings, we'll have three pull-down menus (one for the month, another for the date, and a third for the four-digit year).

Example:
Select a month, date, and year and click "Check the date" to see if the date does indeed exist. For example, try January 1st of any year -- that date will always exist. Then, try February 31st of any year -- that date will never exist.

,

Example 2a shows the HTML code to genereate the form. There's a couple of new items you should note; the VALUE parameter in the OPTION tags are required. Without these VALUE parameters, the JavaScript function will misread the selected values and treat them as blank. Also, instead of a submit button using <INPUT TYPE=Submit>, we use TYPE=Button. In addition, we add the parameter onClick to enable the JavaScript function. This onClickparameter calls the JavaScript function shown in Example 2b, when the "Submit" button is clicked.

Example 2a: HTML Date Entry Form
<FORM NAME=CheckDate METHOD=POST ACTION=jsfunc02.htm>
<SELECT NAME=formMonth>
  <OPTION VALUE=0>Jan
<OPTION VALUE=1>Feb
<OPTION VALUE=2>Mar
<OPTION VALUE=3>Apr
<OPTION VALUE=4>May
<OPTION VALUE=5>Jun
<OPTION VALUE=6>Jul
<OPTION VALUE=7>Aug
<OPTION VALUE=8>Sep
<OPTION VALUE=9>Oct
<OPTION VALUE=10>Nov
<OPTION VALUE=11>Dec
</SELECT>
<SELECT NAME=formDate>
  <OPTION VALUE=1>1
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=4>4
<OPTION VALUE=5>5
<OPTION VALUE=6>6
<OPTION VALUE=7>7
<OPTION VALUE=8>8
<OPTION VALUE=9>9
<OPTION VALUE=10>10
<OPTION VALUE=11>11
<OPTION VALUE=12>12
<OPTION VALUE=13>13
<OPTION VALUE=14>14
<OPTION VALUE=15>15
<OPTION VALUE=16>16
<OPTION VALUE=17>17
<OPTION VALUE=18>18
<OPTION VALUE=19>19
<OPTION VALUE=20>20
<OPTION VALUE=21>21
<OPTION VALUE=22>22
<OPTION VALUE=23>23
<OPTION VALUE=24>24
<OPTION VALUE=25>25
<OPTION VALUE=26>26
<OPTION VALUE=27>27
<OPTION VALUE=28>28
<OPTION VALUE=29>29
<OPTION VALUE=30>30
<OPTION VALUE=31>31
</SELECT>
,
<SELECT NAME=formYear>
  <OPTION VALUE=1975>1975
<OPTION VALUE=1976>1976
<OPTION VALUE=1977>1977
<OPTION VALUE=1978>1978
<OPTION VALUE=1979>1979
<OPTION VALUE=1980>1980
</SELECT>

<INPUT TYPE=Button NAME=Submit VALUE=" Check the date " onClick="checkDate();">
<FORM>

Example 2b shows the JavaScript function, called "checkDate", to verify the data submitted from the form is correct.

Example 2b: JavaScript Form Date Validation
function checkDate() {
  var myDayStr = document.CheckDate.formDate.value;
var myMonthStr = document.CheckDate.formMonth.value;
var myYearStr = document.CheckDate.formYear.value;
var myMonth = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'); var myDateStr = myDayStr + ' ' + myMonth[myMonthStr] + ' ' + myYearStr;

/* Using form values, create a new date object
using the setFullYear function */
var myDate = new Date();
myDate.setFullYear( myYearStr, myMonthStr, myDayStr );

if ( myDate.getMonth() != myMonthStr ) {
  alert( 'I\'m sorry, but "' + myDateStr + '" is NOT a valid date.' );
} else {
  alert( 'Congratulations! "' + myDateStr + '" IS a valid date.' );
}
}

The JavaScript function takes the values submitted in the form (month, date, and year) and creates a new date object. If the date is not valid (i.e. February 31st), the new Date() method will convert the string into a valid date (if Feb 31st was submitted, the new Date() method return the date "Mar 3rd". The next thing the function does is check if the new date object created matches the original date submitted. In this case, Feb does not match Mar, so the date submitted was invalid. However, if "Jan 31st" was submitted, the function would recognize a valid date was submitted and return the appropriate message.

Single-line JavaScript comments may appear after two slashes //, as in:

// This is a single-lined comment
Multi-lined JavaScript comments may appear between between /* and */, such as:
/* This is a
multi-lined comment */
It's good programming to liberally code programs you write in case you need to review the material in the future. Also, if you would like to show others your code, commenting can help them see the logic behind your programming.

^ Top
< Page 1: IF Statement
 Page 3: Title >

<< Return to the "JavaScript - Webtop Reference" page

http://www.csua.berkeley.edu/~jgwang/jsfunc02.htm
Disclaimer