[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to validate the date and time in a form?

Posted on 2008-11-13
6
Medium Priority
?
162 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:Angela123
  • 3
  • 3
6 Comments
 
LVL 6

Expert Comment

by:James Looney
ID: 22949479
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
 
LVL 6

Expert Comment

by:James Looney
ID: 22949487
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
 

Author Comment

by:Angela123
ID: 22949891
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Accepted Solution

by:
James Looney earned 200 total points
ID: 22950162
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
 

Author Comment

by:Angela123
ID: 22951531
Thats great, i will have a bash at that tomorrow and let you know how I get on.
0
 

Author Comment

by:Angela123
ID: 22958236
Hey that worked a treat, thanks very much for your help.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question