How to validate a date using JavaScript

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to validate a date using JavaScript
JavaScript can validate user form input to check for valid date entries. (Thinkstock Images/Comstock/Getty Images)

If you have a Web page with a form element in it and wish to validate user date input, you can do so using JavaScript. There are lots of approaches to user input validation, including regular expressions for complex data items. However, to validate a date against your required format is not necessarily complex. You will need to decide what date format you want to accept and feed this information into your JavaScript code. If users enter invalid date information, you can prompt them to fix their entered data before submitting it.

Skill level:

Other People Are Reading


  1. 1

    Create a JavaScript function. In the Web page with your HTML form in it, add a JavaScript function to a script section in your page head. If you do not have a script section already, add one as follows between the opening and closing head tags: <script type="text/javascript">


    Add the function outline inside this section: function validateDate(){


    You can call the function wherever you want the validation to take place, such as in the "onclick" attribute of a button in the form: <input type="button" value="validate" onclick="alert(validateDate() ? 'valid' : 'invalid')"/>

    In this case clicking the button will cause an output alert containing "valid" or "invalid" but you can alter this to suit your needs.

  2. 2

    Attempt to split the date into sections. Inside your function, retrieve the user-entered date. The following code would work for a text input field with "date_in" as its ID attribute: var dateIn = document.getElementById("date_in").value;

    What you include next depends on what format you want the date to have. If you have indicated that you want "dd/mm/yyyy" format, for example "24/11/1980" attempt to split the input on the slash character: var dateSections = dateIn.split("/");

    Now you can check whether there are three sections for day, month and year: if(dateSections.length!=3) return false;

    In this case the code returns a false value if the date does not have three sections separated by the slash character, in which case there is no need to keep checking as the date is invalid.

  3. 3

    Check whether each section is the correct length. If the script continues executing after the line checking for three sections, the date must so far be valid. Now check that each section has the correct length: var day = dateSections[0]; if(day.length!=2) return false;

    This returns false if the day section is not two characters long. Do the same for the month and year: var month = dateSections[1]; if(month.length!=2) return false; var year = dateSections[2]; if(year.length!=4) return false;

    The year section is checked for four characters.

  4. 4

    Check whether the input sections are numeric. Add a check to see whether each section of the input date is a number: if(isNaN(day)) return false;

    This will return false if the day section is not numeric. Do the same again for the month and year sections: if(isNaN(month)) return false; if(isNaN(year)) return false;

    At this point the function will only continue if there are three sections, each with a number represented using two characters for day and month, with four characters for year.

  5. 5

    Check whether each section is in the correct range. Parsing the numbers as integers ensures that JavaScript will treat them as numbers: var dayNum = parseInt(day); var monthNum = parseInt(month); var yearNum = parseInt(year);

    In general the maximum day number will be 31: var dayMax = 31;

    However, this varies for certain months. Set it for months with 30 days: if(monthNum==4 || monthNum==6 || monthNum==9 || monthNum==11) dayMax=30;

    Set it for February, in general 28 days except for valid leap years: else if(monthNum==2){ dayMax=28; if((yearNum%4==0) && ((!(yearNum%100==0)) || (yearNum%400==0))) dayMax=29; }

    Check that the day number is valid: if(dayNum<1 || dayNum>dayMax) return false;

    Do the same for the month: if(monthNum<1 || monthNum>12) return false;

    For the year, you can choose what range of dates you consider acceptable, which will depend on the purpose of your form. The following tests whether the date is between 1900 and 2050: if(yearNum<1900 || yearNum>2050) return false;

    At the end of your function, return true, as the script will only reach this point if no invalid data has been found: return true;

Tips and warnings

  • You can use advanced options such as regular expressions to check that your date meets more rigid parameters, such as any actual date before the current date.
  • If you do not make it clear to users what format you need the date to be in, they may find it difficult to insert valid data.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.