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

Angela123Asked:
Who is Participating?
 
James LooneyConnect With a Mentor Sr. Programmer/AnalystCommented:
Ya it's definitely do-able, I was just trying to save your users from having to type as much - but I understand the reasoning for you wanting them to enter the information. From a user interface standpoint though, you may want to consider using dropdowns for the time, and maybe a  nice datepicker for the date - then it's guaranteed to be in the format you want.

For the datepicker (and many other cool javascript features), I highly recommend the jQuery library. It is easy to use: http://docs.jquery.com/UI/Datepicker

All you need to do is download the jquery library: http://docs.jquery.com/Downloading_jQuery
download the jquery UI library: http://ui.jquery.com/download

You can put them both in your webroot, or maybe in a folder called "js" or "javascript" or "jquery" - whatever you like. Then view the source of the Demo on the datepicker page and you'll see the code you need in your page to make it work. It works great in all of my apps.
http://docs.jquery.com/UI/Datepicker

Here are two selects for hour and minute you could use to get the time input

time
<select name="hour">
<option value="00" selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
</select>:<select name="minutes">
<option value="00" selected>00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option></select>

Open in new window

0
 
James LooneySr. Programmer/AnalystCommented:
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

0
 
James LooneySr. Programmer/AnalystCommented:
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

0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
Angela123Author Commented:
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?
0
 
Angela123Author Commented:
Thats great, i will have a bash at that tomorrow and let you know how I get on.
0
 
Angela123Author Commented:
Hey that worked a treat, thanks very much for your help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.