Need help merging 2 JS functions, with validation

[fredfletcher]

Hello, I am trying to merge 2 Javascripts together in order to check if:

User has entered info in all required fields, and if all fields were filled, to process the next function being (attach/upload a file), will show a "Uploading... Please wait." message (in DIV below).

I tried onsubmit="return checkFields(); ray.ajax();"> but that did not work, as it did not show the "Uploading... Please wait." message/popup box when the file is uploading.

Any help is appreciated.

Here is my full present code:

<script LANGUAGE="Javascript">


<!-- Begin
function checkFields(f) {
date1 = document.form1.date1.value;
header1 = document.form1.header1.value;
description1 = document.form1.description1.value;


//check required field
if ((date1 == "") || (header1 == "")|| (description1 == "") ) {
alert("Please fill in all fields.");
return false;
}


//  End -->
</script>

This is the next function to execute if user has filled in all required fields.

<script type="text/javascript">
var ray={
ajax:function(st)
	{
		this.show('load');
	},
show:function(el)
	{
		this.getID(el).style.display='';
	},
getID:function(el)
	{
		return document.getElementById(el);
	}
}
</script>

<style type="text/css">
#load{
position:absolute;
z-index:1;
border:3px double #999;
background:#f7f7f7;
width:300px;
height:300px;
margin-top:-150px;
margin-left:-150px;
top:50%;
left:50%;
text-align:center;
/*line-height:300px;*/
font-family:"Trebuchet MS", verdana, arial,tahoma;
font-size:18pt;
}
</style>

<div id="load" style="display:none;"><br><br>Uploading... Please wait.<br><hr><br>Do not close this window until it has finished.</div>

<form action="process_form.php" method="post" enctype="multipart/form-data" name="form1" id="form1" onsubmit="return checkFields();">