PDA

Click to See Complete Forum and Search --> : Calling Multiple Scripts/Date Formatting Validation

cygnusx1z
08-13-2003, 09:23 AM
:confused: I'd like to ask/beg for some help. I made a form that requires the user to enter dates in different fields. I want to validate that the user enters the date correctly (for example: 08/12/2003). It doesn't matter for this form how the user puts the date as long as it's MONTH/DAY/YEAR.

I've copied a JavaScript I got off the internet but have not been able to get it to work with my form. I have two other scripts in the page, one for required fields and another that inputs "today's" date automatically in a text field.

I've pasted the script into the <head> portion. I'd like to call the date formating script when the user leaves (onBlur?) the fields in which the date is required. There are seven of them, not including the "today's" date field, which fills out automatically. I just don't know how to call the script when it's needed.
Any help you can provide would be very much appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML VERSION="-//W3C//DTD HTML 3.2 Final//EN">

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Electronic Tally Form</title>
<script LANGUAGE="JavaScript"
TYPE="text/javascript">
<!--
// redefine the default Date Format
Date.prototype.toString = function () {
return [[this.getMonth() < 10 ? '0' + (this.getMonth()+1) : (this.getMonth()+1), this.getDate() < 10 ? '0' +
this.getDate() : this.getDate(), this.getFullYear()].join('/'), [this.getHours(), this.getMinutes() < 10 ? '0' + this.getMinutes()
: this.getMinutes()].join(':')].join(' ')}

//Validate that fields are completed
function validateFields() {
errmsg = "";

if (document.electTallyForm.csssName.selectedIndex == 0) {
errmsg += "Please select a NAME\n";
}

if (document.electTallyForm.rdsNum.value == "") {
errmsg += "Please enter an RDS NUMBER\n";
electTallyForm.rdsNum.focus()
}

if (errmsg != "") {
alert (errmsg);
return false;
}

}

//Date Format Validation (THIS IS WHERE THE SCRIPT I COPIED BEGINS)
<!-- Begin
function isValidDate(dateStr) {
// Checks for the following valid date formats:
// MM/DD/YY MM/DD/YYYY MM-DD-YY MM-DD-YYYY
// Also separates date into month, day, and year variables

var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{2}|\d{4})$/;

// To require a 4 digit year entry, use this line instead:
// var datePat = /^(\d{1,2})(\/|-)(\d{1,2})\2(\d{4})$/;

var matchArray = dateStr.match(datePat); // is the format ok?
if (matchArray == null) {
alert("Date is not in a valid format.")
return false;
}

month = matchArray[1]; // parse date into variables
day = matchArray[3];
year = matchArray[4];
if (month < 1 || month > 12) { // check month range
alert("Month must be between 1 and 12.");
return false;
}

if (day < 1 || day > 31) {
alert("Day must be between 1 and 31.");
return false;
}

if ((month==4 || month==6 || month==9 || month==11) && day==31) {
alert("Month "+month+" doesn't have 31 days!")
return false
}

if (month == 2) { // check for february 29th
var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
if (day>29 || (day==29 && !isleap)) {
alert("February " + year + " doesn't have " + day + " days!");
return false;
}
}
return true; // date is valid
}
//-->
</script>

</head>

<body bgcolor="#00CC99">
<script TYPE="text/javascript">
<!--
onload = function(){
electTallyForm.date.value=new Date()
}
//-->
</SCRIPT>

<!------------------------------------------------ MAIN AUTHORING AREA ------------------------------------->
<TD WIDTH="445" VALIGN="top" ALIGN="left">
<H2 ALIGN="left"><font face="Arial">Complex Order Tracking Form:</font></H2>
<p ALIGN="left"><font size="2" face="Arial">Please complete one form for each &quot;piece&quot; of work
completed. All fields denoted with an asterisk ( <font color="#FF0000">*</font>
) <font color="#FF0000">are required</font>.</font></p>

<FORM NAME="electTallyForm" METHOD="POST" action="--WEBBOT-SELF--" onsubmit="return validateFields()">
<!--webbot bot="SaveResults" s-label-fields="TRUE" b-reverse-chronology="FALSE" s-builtin-fields u-file="complex_order_track.txt" s-format="TEXT/CSV" startspan --><input TYPE="hidden" NAME="VTI-GROUP" VALUE="0"><!--webbot bot="SaveResults" endspan i-checksum="43374" -->

<DIV ALIGN="center">
<TABLE BORDER="1" CELLPADDING="3" CELLSPACING="1" width="459">
<!--Name & Work Function Row-->
<TR ALIGN="right">
<TH BGCOLOR="#FFCC66" colspan="2" width="448">
<p align="center"><font size="4">Complex Order Tracking Form</font></TH>
</TR>

<TR ALIGN="right">
<TH BGCOLOR="#FFCC66" width="201"><font color="#FF0000">*</font>Name:</TH>
<TD BGCOLOR="#FFCC66" width="238">
<p align="left">
<SELECT NAME="csssName">
<OPTION>-- Select Name --</OPTION>
<OPTION VALUE="xxxxxxx">Benker, Betty</OPTION>
<OPTION VALUE="xxxxxxx">Brock, Janice</OPTION>
<OPTION VALUE="xxxxxxx">Chapman, Monica</OPTION>
<OPTION VALUE="xxxxxxx">Dixon, Sherrita</OPTION>
<OPTION VALUE="xxxxxxx">Holman, Janey</OPTION>
<OPTION VALUE="xxxxxxx">Martinez, Debra</OPTION>
<OPTION VALUE="xxxxxxx">Milligan, Rhonda</OPTION>
<OPTION VALUE="xxxxxxx">Roundtree, Valerie</OPTION>
<OPTION VALUE="xxxxxxx">Snodgrass, Delores A.</OPTION> <OPTION VALUE="xxxxxxx">Sylva, Lisa</OPTION>
</SELECT>
</TD>
</TR>

<TR ALIGN="right">
<TH BGCOLOR="#FFCC66" width="201"><P ALIGN="right"><font color="#FF0000">*</font>Today's Date:</TH>
<TD BGCOLOR="#FFCC66" ALIGN="left" width="238">
<INPUT NAME="date" SIZE="8" onchange="this.value = new Date(this.value)">&nbsp;<TT>MM/DD/YYYY</TT>
</TD>
</TR>

<TR>
<TH BGCOLOR="#FFCC66" width="201">
<p align="right"><font color="#FF0000">*</font>RDS Number:</TH>
<TD BGCOLOR="#FFCC66" width="238">
<p align="left">
<input type="text" name="rdsNum" size="20">
</TD>
</TR>


<tr>
<TH BGCOLOR="#FFCC66" width="201">
<p align="right">COE Mailbox referred to:</TH>
<TH BGCOLOR="#FFCC66" width="238">
<p align="left">
<input type="text" name="coeMailbox" size="20"></TH>
</tr>


<TR>
<TH BGCOLOR="#FFCC66" width="201"><P ALIGN="right">Date Referred:</TH>
<TD BGCOLOR="#FFCC66" width="238">
<p align="left">
<INPUT TYPE="text" NAME="dateRef" SIZE="8">
</TD>
</TR>

<tr>
<TH BGCOLOR="#FFCC66" width="201"><P ALIGN="right">Date Order Issued:</TH>
<TD BGCOLOR="#FFCC66" width="238">
<p align="left">
<INPUT TYPE="text" NAME="dateOrderIssued" SIZE="8">
</TD>
</tr>
<tr>
<TH BGCOLOR="#FFCC66" width="201">
<p align="right">Order Number:</TH>
<TH BGCOLOR="#FFCC66" width="238">
<p align="left">
<input type="text" name="orderNum" size="20"></TH>
</tr>
<tr>
<TH BGCOLOR="#FFCC66" width="201">
<p align="right">EIRD Scheduled Date:</TH>
<TH BGCOLOR="#FFCC66" width="238">
<p align="left">
<input type="text" name="eirdSchedDate" size="8"></TH>
</tr>
<tr>
<TH BGCOLOR="#FFCC66" width="201">
<p align="right">EIRD Actual Date:</TH>
<TH BGCOLOR="#FFCC66" width="238">
<p align="left">
<input type="text" name="eirdActualDate" size="8"></TH>
</tr>
<tr>
<TH BGCOLOR="#FFCC66" width="201">
<p align="right">DD Scheduled Date:</TH>
<TH BGCOLOR="#FFCC66" width="238">
<p align="left">
<input type="text" name="ddSchedDate" size="8"></TH>
</tr>
<tr>
<TH BGCOLOR="#FFCC66" width="201">
<p align="right">DD Actual Date:</TH>
<TH BGCOLOR="#FFCC66" width="238">
<p align="left">
<input type="text" name="ddActualDate" size="8"></TH>
</tr>
<tr>
<TH BGCOLOR="#FFCC66" width="201">
<p align="right">&nbsp;Bard Date:</TH>
<TH BGCOLOR="#FFCC66" width="238">
<p align="left">
<input type="text" name="bardDate" size="8"></TH>
</tr>
<TR>
<TD COLSPAN="2" ALIGN="center" BGCOLOR="#FFCC66" width="448">
<INPUT TYPE="SUBMIT" VALUE="SEND">
<INPUT TYPE="RESET" VALUE="CLEAR">
</TD>
</TR>

</TABLE>
</DIV>
</FORM>

<p ALIGN="left"><font face="Arial"><i><font size="2">If you encounter any trouble while attempting
to complete this form you may email a detailed description of the trouble to the
<a href="mailto:xxxxxx@xxx.com?subject=LBCSC Electronic Tally Form Feedback">Web
Coordinator</a>.</font></i><font size="2"></table> </font></font>
</body>

</html>
Charles
08-13-2003, 12:42 PM
The JavaScript Date object is a wonderfully powerful thing. Its constructor understands a number of different date formats. There really is no need to force your user to input the date your way, you can use the Date object to transform the format to your liking.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
<!--
label {display:block; margin: 1ex 0ex}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
Date.prototype.toString = function () {
return [[this.getMonth() < 10 ? '0' + (this.getMonth()+1) : (this.getMonth()+1), this.getDate() < 10 ? '0' + this.getDate() : this.getDate(), this.getFullYear()].join('/')].join(':')}
// -->
</script>

<form action="">
<div>
<label>First Date<input type="text" onchange="this.value = new Date(this.value)"></label>
<label>Second Date<input type="text" onchange="this.value = new Date(this.value)"></label>
<label>Third Date<input type="text" onchange="this.value = new Date(this.value)"></label>
<label>Fourth Date<input type="text" onchange="this.value = new Date(this.value)"></label>
</div>
</form>

But if you insist on controlling your users...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<style type="text/css">
<!--
label {display:block; margin: 1ex 0ex}
input {display:block}
-->
</style>

<script type="text/javascript">
<!--
Date.prototype.toString = function () {
return [[this.getMonth() < 10 ? '0' + (this.getMonth()+1) : (this.getMonth()+1), this.getDate() < 10 ? '0' + this.getDate() : this.getDate(), this.getFullYear()].join('/')].join(':')}
// -->
</script>

<form action="">
<div>
<label>First Date<input type="text" onchange="if (this.value != new Date(this.value)) {alert('Invalid date format.'); this.value = ''; this.focus()}"></label>
<label>Second Date<input type="text" onchange="if (this.value != new Date(this.value)) {alert('Invalid date format.'); this.value = ''; this.focus()}"></label>
<label>Third Date<input type="text" onchange="if (this.value != new Date(this.value)) {alert('Invalid date format.'); this.value = ''; this.focus()}"></label>
<label>Fourth Date<input type="text" onchange="if (this.value != new Date(this.value)) {alert('Invalid date format.'); this.value = ''; this.focus()}"></label>
</div>
</form>
cygnusx1z
08-13-2003, 01:56 PM
First, thanks Charles for your help. I like your examples, although some strange things happen when I tested the first one. If I input something like "13/5/03" (a user could mistakenly put "13" instead of "12", don't you think?) the script changed the date to "01/05/1904" Anyway, I'm not skilled enough, YET, to figure out how the script you wrote does what it does. I'm working on it.:D

Second, after I read my explanation of my problem I realized I really did not make myself very clear. Really, what happened is that I didn't really know what my problem was.

After doing a little bit of research and reading I figured out that my REAL problem was that I didn't know how to "call" the script I copied. (I'm not nearly adept enough yet, although I am taking classes, to write my own scripts)

What I did was use the "onChange" event handler to call the function isValidDate(dateStr) like so:

<INPUT TYPE="text" NAME="dateRef" SIZE="8" onChange="return isValidDate(electTallyForm.dateRef.value);">

I realize that this is perhaps not the most elegant way of doing what needs to be done but I'm still just a baby learning to walk.

Again, Thanks for your help.