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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2006
    Posts
    138
    Thanks
    11
    Thanked 0 Times in 0 Posts

    JScript Date Validation

    I have a form input that takes a date in the format MM/DD/YYYY.

    I would like to validate this input using Javascript in two fashions:

    1. I need to check that the format of the input is 'MM/DD/YYYY' with the month day and year being numeric

    2. I need to also check that the 'MM/DD/YYYY' being input is later than today + 2 days (i.e. if today is 12/27/07, then the input must be 12/29/07 or greater)

    Any help with these functions is greatly appreciated!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Try this:-

    <p>Enter the date (at least two days in advance of today) in MM/DD/YYYY format:</p>
    <input type = text name = "dateField" size = "10" onblur = "checkdate(this)">

    <script type = "text/javascript">

    function checkdate(input){
    var validformat = /^\d{2}[\/\.-]\d{2}[\/\.-]\d{4}$/ //Basic check for format validity
    var returnval = false;
    if (!validformat.test(input.value)) {
    alert ("Invalid Date Format. Please correct and submit again.");
    input.value = "";
    returnval = false;
    input.focus();
    return false;
    }

    else { //Detailed check for valid date ranges
    input1 = input.value.replace(/[\.\-]/g, "/");
    var monthfield = input1.split("/")[0];
    var dayfield = input1.split("/")[1];
    var yearfield = input1.split("/")[2];
    var dayobj = new Date(yearfield, monthfield-1, dayfield);
    if ((dayobj.getMonth()+1 != monthfield)||(dayobj.getDate() != dayfield)||(dayobj.getFullYear() != yearfield)) {
    alert ("Invalid Day, Month, or Year range detected. Please correct and submit again.");
    input.value = "";
    returnval = false;
    input.focus();
    return false;
    }

    if (dayfield) { // OK so far!
    var now = new Date(); // today
    var todayDate = now.getTime();
    var futureDate = dayobj.getTime(); // date as entered
    if (futureDate - 86400000 < todayDate) { // 86400000 milliseconds = 2 days
    alert ("Date must be at least two days in advance of now! Please correct and submit again.");
    input.value = "";
    returnval = false;
    input.focus();
    return false;
    }

    else {returnval = true}
    }
    }

    alert (returnval);
    return returnval;
    }

    </script>

    i raed a wlihe ago taht as lnog as the frsit and lsat lttesrs in a wrod are in the cerroct pcale msot of us wulod siltl be albe to raed bceause our barnis jsut looks at the frsit and lsat lttesrs.
    Last edited by Philip M; 12-27-2007 at 05:48 PM.

  • #3
    Banned
    Join Date
    Oct 2005
    Location
    I'm in GMT -5
    Posts
    314
    Thanks
    0
    Thanked 1 Time in 1 Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Any Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	var today = new Date();
    	today.setHours(0,0,0,0);	
    	var refDate = new Date(today.getFullYear(),today.getMonth(),today.getDate()+2);
    
    	function validate(nForm){
    
    		var dateField = nForm['useful_date'];
    		var splitDate = dateField.value.split("/");
    		var testDate = new Date(splitDate[2],Number(splitDate[0]-1),splitDate[1]);
    		if (splitDate[0] < 1 || splitDate[0] > 12 || testDate.getDate() != splitDate[1] || splitDate[2].length != 4)
    			{
    			 alert('Invalid date format');
    			 return false;
    			}	
    		if ((testDate - refDate) / 86400000 < 0)
    			{
    			 alert('Date must be at least two days in the future');
    			 return false;
    			}	
    		dateField.value = dateField.value.replace(/^(\d{1}\/)/,"0$1").replace(/(\d{2}\/)(\d{1}\/)/,"$10$2")	
    		alert('Thank you for your submission');	
    		return true;
    	}
    	
    </script>
    <style type="text/css">
    
    	 body {background-color: #fffacd; margin-top: 60px;}
    	 form {width: 620px; margin: auto; font-family: arial; font-size: 12pt;}	
    	 fieldset {background-color: #eee8aa; border: 1px solid #e6b280; padding-left: 8px; padding-bottom: 8px;} 
    	 legend {font-family: arial; font-size: 14pt; color: #000000; background-color: transparent; padding-top: 3px; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
    	.submitBtn {background-color: #ffffff; border: solid 1px #000000; font-family: arial; font-size: 10pt; font-weight: bold; cursor: pointer; display: block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;}
    	
    </style>
    </head>
    	<body>
    		<form method="post" action="" onsubmit="return validate(this)">
    		   <fieldset>
    			<legend>Form</legend>
    				<label>Some Date: <input type="text" name="useful_date" size="10"></label>
    				<br><br>
    				<input type="submit" name="submit" value="Submit" class='submitBtn'>
    		   </fieldset>
    		</form>		
    	</body>
    </html>

  • #4
    Regular Coder
    Join Date
    Feb 2006
    Posts
    138
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thank you both! I prefer the second, as it validates on form submission instead of blur, but I am grateful to both of you!

    Cheers!


  •  

    Posting Permissions

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