Javascript form validation, check if date is passed

Question

I'm trying to validate a form here and I'm almost done. The only issue is I can't figure out a way of validating the dates field to check whether the date that has been put in hasn't passed. It has to be done through Javascript... btw, here is the HTML:

<label for="reservationDate">Date of reservation (DD/MM/YYYY):</label>

<input type="text" id="date" name="date" onblur="validateDate(date)">

<span id="dateError" style="display: none;">Please enter your date of reservation in this format DD/MM/YYYY</span>

Here is the Javascript:

function validateDate(x) {
   var re = /^(\d{1,2})[-/.](\d{1,2})[-/.](\d{4})$/;
   if(re.test(document.getElementById(x).value)){ 
        document.getElementById(x).style.background ='#ccffcc'; 
        document.getElementById(x + 'Error').style.display = "none"; 
        return true;
   } else{ 
        document.getElementById(x).style.background ='#e35152'; 
        document.getElementById(x + 'Error').style.display = "block"; 
        return false; 
   }
}

Hope someone can help :)

possible duplicate of [Check if date is in the past Javascript](http://stackoverflow.com/questions/8305259/check-if-date-is-in-the-past-javascript) — , Dec 08 '13 at 21:22
duplicate or not, this non-jquery solution request wasn't really done cleanly in all the methods I saw, start to finish... so to appease the consciences of my fellow overflowers, and in light of this fine new member, I've completed an answer... and that was not over-flower that is over *flow* er ... but maybe it's over-*flower* too... — digitalextremist, Dec 08 '13 at 21:42

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

Here's some code to make this a specific answer to suit your needs:

function validateDate(x) {
   var re = /^(\d{1,2})[-/.](\d{1,2})[-/.](\d{4})$/;
   var entered = new Date(document.getElementById(x).value);
   var today = new Date();
   if( entered > today ) {
        document.getElementById(x).style.background ='#ccffcc'; 
        document.getElementById(x + 'Error').style.display = "none"; 
        return true;
   } else{ 
        document.getElementById(x).style.background ='#e35152'; 
        document.getElementById(x + 'Error').style.display = "block"; 
        return false; 
   }
}

Here is the working, tested code: http://jsfiddle.net/digitalextremist/rwhhg/1/

Some past answers which are pieces but not really the whole deal:

edited May 23 '17 at 12:29

Community

1
1

answered Dec 08 '13 at 21:19

digitalextremist

5,952
3
43
62

1

If this is a duplicate you should vote to close it as such rather than quoting another question as an answer. – Dec 08 '13 at 21:23
Not my down-vote, but link-only answers are generally frowned upon, 'actual completed code,' on the other hand, is encouraged. Incidentally, you seem to be linking to other answers here on [SO], so this question would be a duplicate, yes? – David Thomas Dec 08 '13 at 21:23
Whoever downvoted me, please reconsider. I get the point... it's a great point... and I will come correct in *all* future situations such as this one. This one I think is not a duplicate though because the solution is cleaner and more complete than what I saw. This is worth being the master answer for posterity. – digitalextremist Dec 08 '13 at 21:43
Thank you, whoever you are, savior of my honor. – digitalextremist Dec 08 '13 at 21:47

Javascript form validation, check if date is passed

1 Answers1