Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Exclamation Future Date Validation

    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:
    Code:
    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Use this simple function to add 29 (or any number of days, add or minus to subtract) to the current date:


    Code:
    <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

    Code:
    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.
    Last edited by Philip M; 05-23-2012 at 02:54 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    SalientAnimal (05-23-2012)

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Use this simple function to add 29 (or any number of days, add or subtract)to the current date:


    Code:
    <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?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by SalientAnimal View Post
    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)
    Last edited by Philip M; 05-23-2012 at 03:19 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    SalientAnimal (05-23-2012)

  • #5
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by Philip M View Post
    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:
    Code:
    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;
    }
    Last edited by SalientAnimal; 05-23-2012 at 03:32 PM. Reason: Update information

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    You must add in the function

    Code:
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    SalientAnimal (05-24-2012)

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,350
    Thanks
    13
    Thanked 349 Times in 345 Posts
    just another way of adding 29 days:
    PHP Code:
    var = new Date(yearmonthday 29); 
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    SalientAnimal (05-24-2012)

  • #8
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    You must add in the function

    Code:
    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:

    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>

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,082
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    <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.
    Last edited by Philip M; 05-24-2012 at 12:21 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New to the CF scene
    Join Date
    May 2012
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    <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.

  • #11
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    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.
    Last edited by 007julien; 05-24-2012 at 01:34 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •