asked on

How to validate the date and time in a form?

Hi
I have set up a form. I have got it so that it validates my mandatory fields which is all working fine.
I want to Validate the time field so that users can only enter 24 hr clock and the date field so that it only accepts dd/mm/yy i am not sure how to set this up.

Any help would be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 
<head>
 
<title>Test</title>
	<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
	
<script language="javascript">
 
function ABC_JScheckForm( f )
{
 
	var sErrors = "";
	var sfocusElements;
	var aCheckFields = new Array();
 
	aCheckFields[0] = "txt01_Name:::Name";
	aCheckFields[1] = "txt03_Time_of_call:::Time";
	aCheckFields[2] = "txt04_Date_of_Call:::Date";
	aCheckFields[3] = "txt05_Details:::Details";
 
 
 
 
// Loop through each field identified as mandatory
	for ( var i = 0; i < aCheckFields.length; i++ ) 
	{
		var aData = aCheckFields[i].split( /\:\:\:/ );
		var oFormElement = eval( "f." + aData[0] );
 
		if ( oFormElement.value.match( /^\s*$/ ) ) 
		{ 
			sErrors += aData[1] + "\n"; 
 
			if ( ! sfocusElements ) { sfocusElements = aData[0]; }
 
		}
	}
	
	if ( sErrors ) 
	{
		alert( "The following fields are required - \n\n" + sErrors );
		eval( "f." + sfocusElements + ".focus()" );
		return false;
	}
	
   return true;
	
}
 
</script>
 
 
 
<FORM name="frmSendMail" action="http://ABC/misc/sendmail/" method="POST" onsubmit="return ABC_JScheckForm( this )">
 
<input type="hidden" name="ctrlSendToEmailAddress" 	 value="Email@Email=>Form Results"/>
<input type="hidden" name="ctrlEmailSubject"             value="Form results" />
<input type="hidden" name="ctrlMethod"                   value="E-MAIL" />	
<input type="hidden" name="ctrlFromEmailAddress"     	 value=""/>
<input type="hidden" name="ctrlRedirectURL"              value="http://ABC/submit/ " />
 
<table width="90%" border="0" cellspacing="0" cellpadding="0" bgcolor="8ED1E6">
<tr> 
	<td valign="top" align="left"> 
		<table width="100%" border="0" cellspacing="1" cellpadding="3" bgcolor="8ED1E6" align="center">
			<tr valign="top" align="left"> 
				<td class="tableBackLightestBlue" colspan="2" height="27"> 
					<p class="pageHead">
					<p style="color: #CC0000">Fields marked with * are mandatory</p>					
				</td>
			</tr>
			
 
<!-- start of form details --> 
 
<TR>
	<TD class="tableBackLgtBlue2">Name</td>
	 	<td class="tableBackLgtBlue2" style="color: #CC0000"><input type="text" name="txt01_Name"> *</td>
</tr> 
 
<TR>
	<TD class="tableBackLgtBlue2">Area</td>
	 	<td class="tableBackLgtBlue2"><select size="1" name="sel02_Area">
			<option value="Select">Select</option>
    			<option value="A">A</option>
    			<option value="B">B</option>
			
    		</select>
	</td>
</tr>
 
<TR>
	<TD class="tableBackLgtBlue2">Time of call</td>
	 	<td class="tableBackLgtBlue2" style="color: #CC0000"><input type="text" name="txt03_Time_of_call"> *</td>
</tr>  
 
<TR>
	<TD class="tableBackLgtBlue2">Date of call</td>
	 	<td class="tableBackLgtBlue2"><input type="text" name="txt04_Date_of_Call"> *</td>
</tr> 
 
 
 
<tr>
	<td class="tableBackLgtBlue2">Brief details</td>
	<td class="tableBackLgtBlue2" style="color: #CC0000"><textarea name="txt05_Details" cols="30" rows="4"></textarea> *</td>
</tr>
 
 
		
			
<tr valign="top" align="left"> 
	<td class="tableBackLgtBlue2" colspan="2"> 
		<table width="100%" border="0" cellspacing="0" cellpadding="0" height="19">
						<tr valign="top" align="left"> 
							<td width="20%">&nbsp;</td>
							<td align="center">&nbsp; </td>
							<td align="right" width="20%"> 
								<INPUT TYPE="submit" class="abcButton" value="SEND MAIL" />
							</td>
						</tr>
					</table>
				</td>
			</tr>
 
		</table>
	</td>
 
</tr>
</table>
 
<br><br>
 
</FORM>
</body>
</html>

Open in new window

James Looney

Here's an idea - don't have them submit time and date (I am assuming you want to know the time and date they are submitting this form?). You could just use javascript to automatically get the time and date. Just make your time and date fields hidden, then have the javascript load the time and date that they hit the submit button.
Here is your code modified:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<script language="javascript">
function ABC_JScheckForm( f )
{
	var sErrors = "";
	var sfocusElements;
	var aCheckFields = new Array();
 
	aCheckFields[0] = "txt01_Name:::Name";
	aCheckFields[1] = "txt03_Time_of_call:::Time";
	aCheckFields[2] = "txt04_Date_of_Call:::Date";
	aCheckFields[3] = "txt05_Details:::Details";
 
	this_date = new Date();
	f.txt03_Time_of_call.value = this_date.getHours() + ':' + this_date.getMinutes();
	f.txt04_Date_of_Call.value =  this_date.getMonth() + '.' + this_date.getDate() + '.' + this_date.getYear();
 
 
	// Loop through each field identified as mandatory
	for ( var i = 0; i < aCheckFields.length; i++ ) 
	{
			var aData = aCheckFields[i].split( /\:\:\:/ );
			var oFormElement = eval( "f." + aData[0] );
 
			if ( oFormElement.value.match( /^\s*$/ ) ) 
			{ 
					sErrors += aData[1] + "\n"; 
 
					if ( ! sfocusElements ) { sfocusElements = aData[0]; }
 
			}
	}
	
	if ( sErrors ) 
	{
			alert( "The following fields are required - \n\n" + sErrors );
			eval( "f." + sfocusElements + ".focus()" );
			return false;
	}
	return true;	
}
</script>
 
<FORM name="frmSendMail" action="http://ABC/misc/sendmail/" method="POST" onsubmit="return ABC_JScheckForm( this )">
<input type="hidden" name="ctrlSendToEmailAddress"       value="Email@Email=>Form Results"/>
<input type="hidden" name="ctrlEmailSubject"             value="Form results" />
<input type="hidden" name="ctrlMethod"                   value="E-MAIL" />      
<input type="hidden" name="ctrlFromEmailAddress"         value=""/>
<input type="hidden" name="ctrlRedirectURL"              value="http://ABC/submit/ " />
<input type="hidden" name="txt03_Time_of_call">
<input type="hidden" name="txt04_Date_of_Call">
 
<table width="90%" border="0" cellspacing="0" cellpadding="0" bgcolor="8ED1E6">
<tr> 
<td valign="top" align="left"> 
<table width="100%" border="0" cellspacing="1" cellpadding="3" bgcolor="8ED1E6" align="center">
<tr valign="top" align="left"> 
<td class="tableBackLightestBlue" colspan="2" height="27"> 
		<p class="pageHead">
		<p style="color: #CC0000">Fields marked with * are mandatory</p>                                        
</td>
</tr>
 
 
<!-- start of form details --> 
 
<TR>
<TD class="tableBackLgtBlue2">Name</td>
<td class="tableBackLgtBlue2" style="color: #CC0000"><input type="text" name="txt01_Name"> *</td>
</tr> 
 
<TR>
<TD class="tableBackLgtBlue2">Area</td>
<td class="tableBackLgtBlue2"><select size="1" name="sel02_Area">
<option value="Select">Select</option>
<option value="A">A</option>
<option value="B">B</option>
 
</select>
</td>
</tr>
 
<tr>
<td class="tableBackLgtBlue2">Brief details</td>
<td class="tableBackLgtBlue2" style="color: #CC0000"><textarea name="txt05_Details" cols="30" rows="4"></textarea> *</td>
</tr>
 
<tr valign="top" align="left"> 
<td class="tableBackLgtBlue2" colspan="2"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="19">
<tr valign="top" align="left"> 
	<td width="20%"> </td>
	<td align="center">  </td>
	<td align="right" width="20%"> 
			<INPUT TYPE="submit" class="abcButton" value="SEND MAIL" />
	</td>
</tr>
</table>
</td>
</tr>
 
</table>
</td>
 
</tr>
</table>
 
<br><br>
 
</FORM>
</body>
</html>

Open in new window

James Looney

Note, that if you want to just have one field that includes date AND time, you can do that too:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<script language="javascript">
function ABC_JScheckForm( f )
{
	var sErrors = "";
	var sfocusElements;
	var aCheckFields = new Array();
 
	aCheckFields[0] = "txt01_Name:::Name";
	aCheckFields[1] = "txt03_Time_of_call:::Time";
	aCheckFields[2] = "txt04_Date_of_Call:::Date";
	aCheckFields[3] = "txt05_Details:::Details";
 
	this_date = new Date();
	f.txt04_Date_of_Call.value =  this_date.toLocaleString( );
 
 
	// Loop through each field identified as mandatory
	for ( var i = 0; i < aCheckFields.length; i++ ) 
	{
			var aData = aCheckFields[i].split( /\:\:\:/ );
			var oFormElement = eval( "f." + aData[0] );
 
			if ( oFormElement.value.match( /^\s*$/ ) ) 
			{ 
					sErrors += aData[1] + "\n"; 
 
					if ( ! sfocusElements ) { sfocusElements = aData[0]; }
 
			}
	}
	
	if ( sErrors ) 
	{
			alert( "The following fields are required - \n\n" + sErrors );
			eval( "f." + sfocusElements + ".focus()" );
			return false;
	}
	return true;	
}
</script>
 
<FORM name="frmSendMail" action="http://ABC/misc/sendmail/" method="POST" onsubmit="return ABC_JScheckForm( this )">
<input type="hidden" name="ctrlSendToEmailAddress"       value="Email@Email=>Form Results"/>
<input type="hidden" name="ctrlEmailSubject"             value="Form results" />
<input type="hidden" name="ctrlMethod"                   value="E-MAIL" />      
<input type="hidden" name="ctrlFromEmailAddress"         value=""/>
<input type="hidden" name="ctrlRedirectURL"              value="http://ABC/submit/ " />
<input type="hidden" name="txt04_Date_of_Call">
 
<table width="90%" border="0" cellspacing="0" cellpadding="0" bgcolor="8ED1E6">
<tr> 
<td valign="top" align="left"> 
<table width="100%" border="0" cellspacing="1" cellpadding="3" bgcolor="8ED1E6" align="center">
<tr valign="top" align="left"> 
<td class="tableBackLightestBlue" colspan="2" height="27"> 
		<p class="pageHead">
		<p style="color: #CC0000">Fields marked with * are mandatory</p>                                        
</td>
</tr>
 
 
<!-- start of form details --> 
 
<TR>
<TD class="tableBackLgtBlue2">Name</td>
<td class="tableBackLgtBlue2" style="color: #CC0000"><input type="text" name="txt01_Name"> *</td>
</tr> 
 
<TR>
<TD class="tableBackLgtBlue2">Area</td>
<td class="tableBackLgtBlue2"><select size="1" name="sel02_Area">
<option value="Select">Select</option>
<option value="A">A</option>
<option value="B">B</option>
 
</select>
</td>
</tr>
 
<tr>
<td class="tableBackLgtBlue2">Brief details</td>
<td class="tableBackLgtBlue2" style="color: #CC0000"><textarea name="txt05_Details" cols="30" rows="4"></textarea> *</td>
</tr>
 
<tr valign="top" align="left"> 
<td class="tableBackLgtBlue2" colspan="2"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="19">
<tr valign="top" align="left"> 
	<td width="20%"> </td>
	<td align="center">  </td>
	<td align="right" width="20%"> 
			<INPUT TYPE="submit" class="abcButton" value="SEND MAIL" />
	</td>
</tr>
</table>
</td>
</tr>
 
</table>
</td>
 
</tr>
</table>
 
<br><br>
 
</FORM>
</body>
</html>

Open in new window

Angela123

ASKER

Thanks for getting back to me.

I need to have them input the time/date as it is when they get a call, i want people to fill this in so it will not necessarily be the time they submit the form they could log my form a few days after they get a call.

Is it not possiblle to do what i am trying to do?

ASKER CERTIFIED SOLUTION

James Looney

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Angela123

ASKER

Thats great, i will have a bash at that tomorrow and let you know how I get on.

Angela123

ASKER

Hey that worked a treat, thanks very much for your help.