Javascript to validate date entered

Question

I am new to Javascript programming and I am trying to validate a date entered into an <input> from a calender snippet which is obtained from an external Javascript file. I am trying to validate the date to check if the user entered a past date. If the entered date is a past date, then I need to print a warning message to enter a valid date in future period.

I accept input date field in following HTML code:

<input size="12" id="inputField" name="inputField"  autofocus="" type="date"     oninput="return dateValidate(inputField)"/>

My Javascript function to validate input date is:

<script type="text/javascript">
function dateValidate(inputField)
{

 var v2 = document.getElementById('inputField');
 var pickeddate = new Date(v2.Value);
 todayDate = new Date();
 if(pickeddate > todayDate){
    return true;
 } else {
    alert("Enter a valid Date");
 }
}

But this code doesn't seem to be working. I want this Javascript function to be run when I enter a past date in the <input> field and tab out. I want to validate date when it is entered in the field, not when the form is submitted.

score 4 · Answer 1 · answered Apr 20 '13 at 18:48

4

It is not working since there is a issue in your code, just replace this:

var pickeddate = new Date(v2.Value);

with this:

var pickeddate = new Date(v2.value);   // 'value' should be in lower case

Since, it was not correct, the pickeddate was always undefined and code didn't worked.

answered Apr 20 '13 at 18:48

palaѕн

72,112
17
116
136

2

Not `undefined`, but a `Date` object with a `NaN` value to be technically correct. But in the comparison that's the same… – Bergi Apr 20 '13 at 19:22

The Alpha · Accepted Answer · 2013-04-20T19:41:52.700

2

You may try this

HTML

<input size="12" id="inputField" name="inputField"  autofocus="" type="date"     onblur="return dateValidate(this)"/>

JS

function dateValidate(inputField)
{
    var pickeddate =  new Date(inputField.value);
    var todayDate =  new Date();
    if( pickeddate > todayDate )
    {
       return true;
    }
    else
    {
        alert("Enter a valid Date");
    } 
}

DEMO.

edited Apr 20 '13 at 19:41

answered Apr 20 '13 at 19:04

The Alpha

143,660
29
287
307

To get the timestamp, [here](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/getTime). – The Alpha Apr 20 '13 at 19:27
1

I know what it does, but why do you use it? It's unnecessary, and you might want to reuse `pickedDate` as a *`Date` object*. – Bergi Apr 20 '13 at 19:32
Thanks Mr. Heera. Worked like a magic. How should I identify to use onchange()/onblur() for my event? I was using onchange() for that and got stuck there.
Abhi – Abhi Apr 20 '13 at 20:36
@Abhi, Welcome! Actually both events work like same, when you focus out the element but the difference is that the change event fires only when the value changes. I think you can only use the `onchange` event. – The Alpha Apr 20 '13 at 21:20
1

Dunno how many times it needs to be said: using the Date constructor to parse date strings is unreliable. You have no idea what format the string will be in, or whether the browser will parse it correctly or not. Even the latest versions of the most popular browsers differ on how to parse ISO 8601 strings, so please, **do not recommend it**. – RobG Mar 20 '15 at 11:16

Javascript to validate date entered

2 Answers2

Linked