PDA

Click to See Complete Forum and Search --> : Combining two validation scripts.

cygnusx1z
04-25-2003, 10:43 AM
Hello everyone! I hope someone can help this novice out. I am attempting to combine two scripts that I obtained from other sources (I did not write them myself, I'm not proficient enough yet:D ).

I have built a form with 4 fields. 2 <select> boxes and 2 <text> boxes. I want all 4 fields to be "required" fields. One of the text boxes is a date field. I have copied a date validation JavaScript that works. I have also copied a field validation JavaScript that works.

However, I am doing something wrong when I put both scripts into my HTML file. When I test the form by not filling any fields I get the proper error messages. I then tested by ommitting only the date and that works fine as well. I then test the form by ommitting all but the date. I get the proper error message box but after I click "OK" the form gets "sent" instead of going back to the form.

Also, the date script does not appear to work at all in Netscape 4.75.

One other note, I used FrontPage(it's what my company uses). I have had FrontPage "send" the information collected by the form to a text file.

Any suggestions?

Here's my code:

<HTML>
<HEAD>
<TITLE>Electronic Tally Form</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
<!--
//Validate that fields are completed
function validateFields() {
errmsg = "";

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

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

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

if (errmsg == "") {
return true

} else {
alert (errmsg);
}

}


// Declaring valid date character, minimum year and maximum year
var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
var i;
for (i = 0; i < s.length; i++){
// Check that current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
// All characters are numbers.
return true;
}

function stripCharsInBag(s, bag){
var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}

function daysInFebruary (year){
// February has 29 days in any year evenly divisible by four,
// EXCEPT for centurial years which are not also divisible by 400.
return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}
function DaysArray(n) {
for (var i = 1; i <= n; i++) {
this[i] = 31
if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
if (i==2) {this[i] = 29}
}
return this
}

function isDate(dtStr){
var daysInMonth = DaysArray(12)
var pos1=dtStr.indexOf(dtCh)
var pos2=dtStr.indexOf(dtCh,pos1+1)
var strMonth=dtStr.substring(0,pos1)
var strDay=dtStr.substring(pos1+1,pos2)
var strYear=dtStr.substring(pos2+1)
strYr=strYear
if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
for (var i = 1; i <= 3; i++) {
if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
}
month=parseInt(strMonth)
day=parseInt(strDay)
year=parseInt(strYr)
if (pos1==-1 || pos2==-1){
alert("The date format should be : mm/dd/yyyy")
return false
}
if (strMonth.length<1 || month<1 || month>12){
alert("Please enter a valid month")
return false
}
if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
alert("Please enter a valid day")
return false
}
if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear)
return false
}
if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){
alert("Please enter a valid date")
return false
}
return true
}

function ValidateForm(){
var dt=document.electTallyForm.date
if (isDate(dt.value)==false){
dt.focus()
return false
}
return true
}
-->
</script>
</HEAD>
<BODY BGCOLOR="WHITE" TEXT="BLUE">
<BASEFONT FACE="Arial, Helvetica" SIZE=+2>

<FORM NAME="electTallyForm" METHOD="POST" action="--WEBBOT-SELF--">
<!--webbot bot="SaveResults" u-file="C:\WINNT\Profiles\user1\Desktop\electtallyform_results.txt" s-format="TEXT/CSV" s-label-fields="TRUE" b-reverse-chronology="FALSE" s-builtin-fields --><div align="center">
<center>
<TABLE BORDER="1" CELLPADDING="3" cellspacing="1">
<TR ALIGN="right">
<th bgcolor="#FFCC66">NAME:&nbsp;
<SELECT NAME="name">
<OPTION VALUE="Select One">Select One</OPTION>
<OPTION VALUE="000000">Adams, Pam</OPTION>
<OPTION VALUE="111111">Alender, Tina</OPTION>
<OPTION VALUE="222222">Allen, Bob</OPTION>
</SELECT>
</th>

<th bgcolor="#FFCC66">WORK FUNCTION:
<SELECT NAME="work_func">
<OPTION>Select One</OPTION>
<OPTION>Work Function 1</OPTION>
<OPTION>Work Function 2</OPTION>
<OPTION>Work Function 3</OPTION>
</select>
</th>
</TR>

<TR ALIGN="right">
<th bgcolor="#FFCC66">
<p align="left">DATE:&nbsp;&nbsp; <INPUT NAME="date" size="12" maxlength="10"> <TT>&nbsp;MM/DD/YYYY</TT></th>
<th bgcolor="#FFCC66">
<p align="left">ORDER NUMBER:&nbsp; <INPUT TYPE="text" NAME="ordrnum" SIZE="20"> </th>

<TR>
<TD COLSPAN="2" ALIGN="center" bgcolor="#FFCC66">
<INPUT TYPE="SUBMIT" onclick="validateFields(),ValidateForm()" VALUE="SEND">
<INPUT TYPE="RESET" VALUE="CLEAR">
</TD>
</TR>
</TABLE>
</center>
</div>
</FORM>


</BODY>
</HTML>
Jona
04-25-2003, 11:06 AM
<INPUT TYPE="SUBMIT" onclick="return validateFields();return ValidateForm()" VALUE="SEND">
cygnusx1z
04-25-2003, 01:21 PM
Thanks for your quick reply Jonah. I'm sorry to say, however, that it did not work. I tested it again.

1. I tested by not inputing any information into any field. I received the error message for the field validation script (i.e., validateFields()). When I clicked "OK" the form was "sent" instead of returning to the form.

2. I then input information into all BUT the date field. I received no error message at all and the form was "sent".

3. I then input only the date and clicked send. I received the error message for the validateFields() function but again the message was "sent" instead of returning to the form.

Thanks again for your help. Any other ideas?
Charles
04-25-2003, 01:36 PM
<FORM NAME="electTallyForm" METHOD="POST" action="--WEBBOT-SELF--" onsubmit="return validateFields() && ValidateForm() ? true : false">
cygnusx1z
04-25-2003, 01:55 PM
That did it! Thank you very much Charles.

Now, for my own edification, I understand that the "&&" means simply "AND", however, could you explain what the "?true:false" portion of the code is doing?

Also, I've been asked if I could make the date field default to the current date, but be able to be modified if desired by the user. Any ideas?

Again, thank you!
Jona
04-25-2003, 01:57 PM
The ?true:false is a shortening of if(variable_one==true){return true;}else{return false;}
cygnusx1z
04-25-2003, 02:06 PM
Thank you Jona and Charles!
Charles
04-25-2003, 02:16 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Electronic Tally Form</TITLE>
<SCRIPT LANGUAEG="JavaScript">
<!--
// redefine the default Date Format
Date.prototype.toString = function () {return [this.getMonth() < 10 ? '0' + this.getMonth() : this.getMonth(), this.getDate() < 10 ? '0' + this.getDate() : this.getDate(), this.getFullYear()].join('/')}

//Set the Date Field
onload = function () {electTallyForm.date.value = new Date()};

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

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

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

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

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

}

-->
</script>
</HEAD>
<BODY BGCOLOR="WHITE" TEXT="BLUE">
<BASEFONT FACE="Arial, Helvetica" SIZE=+2>

<FORM NAME="electTallyForm" METHOD="POST" action="--WEBBOT-SELF--" onsubmit="return validateFields()">
<!--webbot bot="SaveResults" u-file=" C:\WINNT\Profiles\user1\Desktop\electtallyform_res
ults.txt" s-format="TEXT/CSV" s-label-fields="TRUE" b-reverse-chronology="FALSE" s-builtin- fields --><div align="center">
<center>
<TABLE BORDER="1" CELLPADDING="3" cellspacing="1">
<TR ALIGN="right">
<th bgcolor="#FFCC66">NAME:
<SELECT NAME="name">
<OPTION VALUE="Select One">Select One</OPTION>
<OPTION VALUE="000000">Adams, Pam</OPTION>
<OPTION VALUE="111111">Alender, Tina</OPTION>
<OPTION VALUE="222222">Allen, Bob</OPTION>
</SELECT>
</th>

<th bgcolor="#FFCC66">WORK FUNCTION:
<SELECT NAME="work_func">
<OPTION>Select One</OPTION>
<OPTION>Work Function 1</OPTION>
<OPTION>Work Function 2</OPTION>
<OPTION>Work Function 3</OPTION>
</select>
</th>
</TR>

<TR ALIGN="right">
<th bgcolor="#FFCC66">
<p align="left">DATE: <INPUT NAME="date" size="12" onchange="this.value = new Date(this.value)"> <TT> MM/DD/YYYY</ TT></th>
<th bgcolor="#FFCC66">
<p align="left">ORDER NUMBER: <INPUT TYPE="text" NAME="ordrnum" SIZE="20"> </th>

<TR>
<TD COLSPAN="2" ALIGN="center" bgcolor="#FFCC66">
<INPUT TYPE="SUBMIT" VALUE="SEND">
<INPUT TYPE="RESET" VALUE="CLEAR">
</TD>
</TR>
</TABLE>
</center>
</div>
</FORM>


</BODY>
</HTML>