...

View Full Version : Future Date Validation



SalientAnimal
05-23-2012, 02:58 PM
Hi All,

I'm trying to get my Validation to check my calendar to ensure that the date being selected from the calendar is a future date.

The code I am currently using is:


var dateString = document.form1.date.value;
var myDate = new Date(dateString);
var today = new Date();
if(document.forms.form1.date.value=="")
{
alert("Please select a date from the calendar.");
document.forms.form1.date.focus();
return false;
}
else if (myDate<today)
{
alert("Please select a future date from the calendar.");
document.forms.form1.date.focus();
return false;
}


Unfortunatly it only validates the date, and not if the date captured is a future date. Ideally I would like it to check that the date selected is at least 29 days from the current date.

Thanks :thumbsup:

Philip M
05-23-2012, 03:51 PM
Use this simple function to add 29 (or any number of days, add or minus to subtract) to the current date:



<script type="text/javascript">

function addDays(myDate,days) {
return new Date(myDate.getTime() + days*24*60*60*1000);
}

alert(addDays(new Date(),29));

</script>

so you want


var today = addDays(new Date(),29); // which will set today to the date 29 days into the future.All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

SalientAnimal
05-23-2012, 03:55 PM
Use this simple function to add 29 (or any number of days, add or subtract)to the current date:



<script type="text/javascript">

function addDays(myDate,days) {
return new Date(myDate.getTime() + days*24*60*60*1000);
}

alert(addDays(new Date(),29));

</script>

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Do you perhaps know why the rest o my code isn't working? Or would me just adding the code you supplied fix all of the problems?

Philip M
05-23-2012, 04:12 PM
Do you perhaps know why the rest o my code isn't working? Or would me just adding the code you supplied fix all of the problems?

No idea. You did not say that it did not work. You said "It validates the date". That means that it does work. Try using alerts at strategic points to check the value of the variables. But adding the code I gave you will do what it says on the tin - it will add 29 days to the current date, so you can compare that with the date selected by the user.

I now see

if(document.forms.form1.date.value=="")

The syntax is document.formname.elementname.value
or
document["formname"]["elementname"].value)

SalientAnimal
05-23-2012, 04:24 PM
No idea. You did not say that it did not work. You said "It validates the date". That means that it does work. Try using alerts at strategic points to check the value of the variables. But adding the code I gave you will do what it says on the tin - it will add 29 days to the current date, so you can compare that with the date selected by the user.

I now see

if(document.forms.form1.date.value=="")

The syntax is document.formname.elementname.value
or
document["formname"]["elementname"].value)

I have to apologise. I think I didn't clearly specify what it is doing, and what it isn't doing.

What my existing code does correctly:
Validates that a date was selected using the calender.
The Date field on the form is not blank.
What my code doesn't do:
Doesn't check that the date selected is 29 days or more from now.

So I added your code the begining of my scripts and I am now getting a pop-up displaying the date 29 days frm now before anything has been selected. Sorry I'm really new to using JavaScript and I'm still on a huge learning curve. Thanks for all your help thus far.

This is what I have changed my code to:

var dateString = document.form1.cancellation_date.value;
var myDate = new Date(dateString);
var today = addDays(new Date(),29);
if(document.form1.cancellation_date.value=="")
{
alert("Please select a future cancellation date from the calendar.");
document.form1.cancellation_date.focus();
return false;
}

Philip M
05-23-2012, 05:06 PM
You must add in the function


function addDays(myDate,days) {
return new Date(myDate.getTime() + days*24*60*60*1000);
}

Part of the trouble is that you are only showing a part of your code. I do not see anything about a pop-up. Your code must be contained within a function or it will indeed run on page load. You want it triggered by an event handler of some kind, but unless you show all your (relevant, please) code then it is hard to offer any observations. Presumably the check is suppose to be triggered when the user selects a date from the calendar.

Dormilich
05-24-2012, 07:23 AM
just another way of adding 29 days:

var d = new Date(year, month, day + 29);

SalientAnimal
05-24-2012, 08:21 AM
You must add in the function


function addDays(myDate,days) {
return new Date(myDate.getTime() + days*24*60*60*1000);
}

Part of the trouble is that you are only showing a part of your code. I do not see anything about a pop-up. Your code must be contained within a function or it will indeed run on page load. You want it triggered by an event handler of some kind, but unless you show all your (relevant, please) code then it is hard to offer any observations. Presumably the check is suppose to be triggered when the user selects a date from the calendar.

Well I have quite a bit of code. Please keep in mind though that I am self taught with my coding, so things here are going to look really messy. I'm running a PHP fige which then writes to a MySQL database. Below is the pages code:


<?php

session_start();
$conn = @mysql_connect("localhost","root","password") or exit("Could not establish a connection to MySQL Server. mysql_error()");
$select = @mysql_select_db("cancellations",$conn) or exit("Could not select the appropriate database for this operation. mysql_error()");

if(isset($_COOKIE['ID_my_site']))
{
$username = $_COOKIE['ID_my_site'];
$name = $_COOKIE['ID_my_name'];
$pass = $_COOKIE['Key_my_site'];
$check = @mysql_query("SELECT * FROM userinfo WHERE username='$username'") or die("Failed to execute SQL Statement.");
while($info = mysql_fetch_array($check))
{
if($pass != $info['password'])
{
header("Location: login.php");
}
else{

}
}
}
else{
header("Location:login.php");
}
include "navigation/backoffice.html";
?>

?>

<html>
<title> 2012 - Cancellations</title>
<script type="text/javascript">
var count = 0;
var delay = 250;
var text = "2012 - Cancellations ";
function scroll () {
document.title = text.substring(count, text.length) + text.substring (0, count)
if (count < text.length) {
count ++;
} else {
count = 1;
}
setTimeout ("scroll(1)", delay);
}
scroll();
</script>
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">

<script src="js/mmenu.js" type="text/javascript"></script>
<script language="javascript" src="js/universal_dynamiclisting_champs.js"></script>
<script language="javascript" src="js/suburb_dynamiclisting.js"></script>
<script type="text/javascript" src="js/datetimepicker_css.js"></script>
<script type="text/javascript">

function addDays(myDate,days) {
return new Date(myDate.getTime() + days*24*60*60*1000);
}

alert(addDays(new Date(),29));

</script>
<script language="javascript" type="text/javascript">

<!-- hide script from older browsers
function validateForm(form1)
{




if(""==document.forms.form1.fname.value)
{
alert("You have not captured the customers first name correctly.");
document.forms.form1.fname.focus();
return false;
}



if(""==document.forms.form1.lname.value)
{
alert("You have not captured the customers last name correctly.");
document.forms.form1.lname.focus();
return false;
}





// require at least 3 characters be entered
if (document.forms.form1.customer_id.value.length < 13)
{
alert("Please enter a valid ID Number.");
document.forms.form1.customer_id.focus();
return false;
}





// require at least 3 characters be entered
if (document.forms.form1.msisdn.value.length < 10)
{
alert("Please enter a valid MSISDN.");
document.forms.form1.msisdn.focus();
return false;
}





// require at least 3 characters be entered
if (document.forms.form1.alt_msisdn.value.length < 10)
{
alert("Please enter a valid Alternative Contact Number.");
document.forms.form1.alt_msisdn.focus();
return false;
}





var x=document.forms.form1.customer_email.value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("The e-mail address captured is invalid. Ensure that the address is in the Mailbox@domain format.");
document.forms.form1.customer_email.focus();
return false;
}




var dateString = document.form1.cancellation_date.value;
var myDate = new Date(dateString);
var today = addDays(new Date(),29);
if(document.form1.cancellation_date.value=="")
{
alert("Please select a future cancellation date from the calendar.");
document.form1.cancellation_date.focus();
return false;
}





if(""==document.forms.form1.cancellation_reason.value)
{
alert("Please capture a reason for the customer's cancellation.");
document.forms.form1.cancellation_reason.focus();
return false;
}





if(""==document.forms.form1.status.value)
{
alert("Please select a query status from the drop-down provided.");
document.forms.form1.status.focus();
return false;
}





if(""==document.forms.form1.tier.value)
{
alert("Please select a tier from the drop-down provided.");
document.forms.form1.tier.focus();
return false;
}






}
stop hiding script -->
</script>


<style type="text/css">
<!--
#form1 table tr td {
color: #FFF;
}
#form1 table tr td {
font-family: Segoe Print, Segoe UI, Tahoma;
font-size: 13px;
}
#form1 p {
color: #FFF;
font-size: 36px;
font-weight: bold;
text-align: center;
font-family: Segoe Print, Segoe UI, Tahoma;
}
-->
</style>
</head>
<link rel="stylesheet" type="text/css" href="css/layout_csops.css"/>
<!--
<body onload="javascript:popup('message.jpg')">
-->
<form id="form1" name="form1" method="post" action="submit/submit_cancellations.php" onSubmit="return validateForm(form1);">
<table width="100%" border="0">
<tr>
<td width="20%">
</td>
<td width="80%"><p align="justify">Customer Services Operations - Cancellations</p></td>
</tr>
<tr>
<td height="548">&nbsp;</td>

<td><table width="92%" border="0" align="center" cellpadding="2" cellspacing="0">



<!-- USERNAME -->

</td>
<td><input type="hidden" name="username" value="<?php echo "$username"; ?>"></td>
</tr>



<!-- FIELD 1 -->
<tr>
<td width="34%" align="right" valign="middle"><strong>Customer Name :</strong></td>
<td>
<input id="element_1_1" name= "fname" class="element text" maxlength="70" value=""/>
<input id="element_1_2" name= "lname" class="element text" maxlength="70" value=""/>
</td>

<tr>
<td></td>
<td>First
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
Last
</td>
</tr>





<!-- FIELD 2 -->
<tr>

<td width="35%" align="right" valign="middle"><strong>Customer ID Number :</strong></td>
<td><input type="text" name="customer_id" align="left" valign="middle" maxlength="13"></td>

</tr>





<!-- FIELD 3 -->
<tr>

<td width="35%" align="right" valign="middle"><strong>MSISDN :</strong></td>
<td><input type="text" name="msisdn" align="left" valign="middle" maxlength="10"></td>

</tr>





<!-- FIELD 4 -->
<tr>

<td width="35%" align="right" valign="middle"><strong>Alternative MSISDN :</strong></td>
<td><input type="text" name="alt_msisdn" align="left" valign="middle" maxlength="10"></td>

</tr>





<!-- FIELD 5 -->
<tr>
<td width="34%" align="right" valign="middle"><strong>E-Mail Address :</strong></td>
<td>
<input id="element_2_1" name="customer_email" class="element text" size="45" maxlength="70" value=""/>

</td>
</tr>





<!-- FIELD 6 -->
<tr>

<td width="35%" align="right" valign="middle"><strong>Fax Number :</strong></td>
<td><input type="text" name="fax" align="left" valign="middle" maxlength="10"></td>

</tr>






<!-- FIELD 7 -->

<tr>

<td width="34%" align="right" valign="top"><strong>Handset Buyout Value :</strong></td>
<td><input type="text" name="buyout" align="left" valign="middle"><br>
<font size="1" face="Segoe Print", "Tahoma", "Segoe UI">(Copy and paste this value directly from Clarify)</font>


</tr>




<!-- FIELD 8 -->
<tr>

<td width="24%" align="right" valign="middle"><strong>Cancellation Date:</strong></td>
<td colspan="3"><input type="text" id="cancellation_date" maxlength="25" size="25" name="cancellation_date">
<a href="javascript: NewCssCal('cancellation_date','yyyymmdd','dropdown',true,24,false)">
<img src="img/cal.gif" width="16" height="16" alt="Pick a date"></a></td>

</tr>






<!-- FIELD 9 -->

<tr>

<td width="34%" align="right" valign="middle"><strong>Cancellation Reason :</strong></td>
<td><input type="text" name="cancellation_reason" align="left" valign="middle"></td>

</tr>





<!-- FIELD 10 -->
<tr>

<td width="34%" align="right" valign="middle"><strong>Status :</strong></td>
<td width="66%" align="left" valign="middle"><select name="status" id="status">
<option value="">Select the Status</option>
<option value="Awaiting Confirmation">Awaiting Confirmation</option>
<option value="Confirmed">Confirmed</option>
<option value="Closed">Closed</option>
<option value="Retained">Retained</option>
</select>
</td>
</tr>





<!-- FIELD 11 -->
<tr>

<td width="34%" align="right" valign="middle"><strong>Tier :</strong></td>
<td width="66%" align="left" valign="middle"><select name="tier" id="tier">
<option value="">Select the Tier</option>
<option value="Tier 0">Tier 0</option>
<option value="Tier 1">Tier 1</option>
<option value="Tier 2">Tier 2</option>
<option value="Tier 3">Tier 3</option>
</select>
</td>
</tr>






<!-- FIELD 12 -->
<tr>
<td width="34%" align="right" valign="middle"><strong>Comments :</strong></td>
<td><textarea rows ="5" cols="50" name="comments">Query Details:
Action Taken:
Additional Information:</textarea><br>
<font size="1" face="Segoe Print", "Tahoma", "Segoe UI"> (You may enter up to 2500 characters NOTE: the following characters can not be used ' - * !)
</font>
</tr>






<tr>
<td>
<p>
<input type="reset" value="Reset Form">
</p></td>
<td>
<p>
<input type="Submit" value="Submit">
</p></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>

Philip M
05-24-2012, 01:18 PM
<script language="javascript" type="text/javascript">
<!-- hide script from older browsers

<script language=javascript> is long deprecated. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

Be aware that form validation of the pattern if (document.formname.formfield.value == "") is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses - your email validation is very primitive. This topic has been covered many times before in this forum.

SalientAnimal
05-24-2012, 01:53 PM
<script language="javascript" type="text/javascript">
<!-- hide script from older browsers

<script language=javascript> is long deprecated. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

Be aware that form validation of the pattern if (document.formname.formfield.value == "") is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses - your email validation is very primitive. This topic has been covered many times before in this forum.

Wow, that is a lot of things to take in, lol. Being as inexperienced as I am, I generally just get something, see if it works and if it does, I'm happy :). Never really thought that there was that much more to think about. I suppose it gives me reason to try clean up my code a bit when I get a chance. For now I just want to get the date validation to work as intended.

007julien
05-24-2012, 02:27 PM
Attention, every day do not contain 24 hours (or 24*60*60*1000 milliseconds) with day ligth saving times !
A better method is to use myDate.setDay(myDate.getDate()+29) or to work with myDate.setMonth(myDate.getMonth()+1) to get the following Month.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum