{"id":10904,"date":"2016-02-15T16:15:06","date_gmt":"2016-02-15T14:15:06","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=10904"},"modified":"2018-01-10T16:19:44","modified_gmt":"2018-01-10T14:19:44","slug":"javascript-date-validation-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/","title":{"rendered":"Javascript Date Validation Example"},"content":{"rendered":"<p>The aim of this article is to validate date input in javascript. When getting information from a user for insertion into a database, or use in other processing, it&#8217;s important to control what the user can enter. Otherwise you can end up with values in the database that have no relation to reality.<\/p>\n<p>Javascript does not provide any method to achieve validation of date or even quite a lot of other kinds of validation. So, it makes sense the the developer should take the task of creating a function which will handle validation of date in aspects of format, number limits etc.<\/p>\n<p>Through this article, you will be shown easy functional ways to make this validation. Remember that your code shall be as clean as possible.<br \/>\n[ulp id=&#8217;tCIwOngQUb3zSUuF&#8217;]<\/p>\n<h2>1. Document Setup<\/h2>\n<p>To begin, create a new HTML document and add the very basic syntax for writing HTML and Javascript like so:<\/p>\n<p><span style=\"text-decoration: underline\"><em>js-date-validation.html<\/em><\/span><\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;Javascript Date Validation Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- HTML SECTION  --&gt;\r\n\r\n\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Next, we&#8217;ll be adding the elements we need inside a <code>form<\/code> since this is going to be &#8216;submitted&#8217;.<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;form method=\"POST\" onsubmit=\"return checkDate(this);\"&gt;\r\n  &lt;span&gt;Please enter a date below:&lt;\/span&gt;&lt;br\/&gt;\r\n  &lt;input type=\"text\" name=\"date\" placeholder=\"dd\/mm\/yyyy\"&gt;\r\n  &lt;br\/&gt;&lt;input type=\"submit\" value=\"Validate\"&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<p>The <code>onsubmit=\"return checkDate(this);<\/code> will serve as a way to trigger the function of validation as soon as the form is submitted. This function will be implemented below. For now, we&#8217;d have this view:<\/p>\n<figure id=\"attachment_10912\" aria-describedby=\"caption-attachment-10912\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-1.jpg\" rel=\"attachment wp-att-10912\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-1.jpg\" alt=\"The HTML elements we&#039;ll need from now on.\" width=\"820\" height=\"141\" class=\"size-full wp-image-10912\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-1.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-1-300x52.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-1-768x132.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10912\" class=\"wp-caption-text\">The HTML elements we&#8217;ll need from now on.<\/figcaption><\/figure>\n<h2>2. Implementing a Date Validation Function<\/h2>\n<p>The next step is validating the form&#8217;s only input, so that it matches that of a date.<\/p>\n<h3>2.1 Example 1<\/h3>\n<p>In this first example, we&#8217;re giving an easy to understand <code>dd\/mm\/yyyy<\/code> date validation.<\/p>\n<pre class=\"brush:js\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\/\/ new function to handle validation\r\n function checkDate(form)\r\n  {\r\n    \/\/ regular expression to match required date format\r\n    re = \/^(\\d{1,2})\\\/(\\d{1,2})\\\/(\\d{4})$\/;\r\n    \/\/ ^ means begin, \\d means expect a digit within {n1, n2}, $ means end with.\r\n    if(form.date.value != '') { \/\/ check to see the input is not left empty\r\n      if(regs = form.date.value.match(re)) {  \/\/ check and save the general format matching\r\n        \/\/ day value between 1 and 31\r\n        if(regs[1] &lt; 1 || regs[1] &gt; 31) { \/\/ regs[1] means the first value given\r\n          alert(\"Invalid value for day: \" + regs[1]); \/\/ alert user to check day again\r\n          form.date.focus();  \/\/ give focus to the input field\r\n          return false;\r\n        }\r\n        \/\/ month value between 1 and 12\r\n        if(regs[2] &lt; 1 || regs[2] &gt; 12) {\r\n          alert(\"Invalid value for month: \" + regs[2]);\r\n          form.date.focus();\r\n          return false;\r\n        }\r\n        \/\/ year value between 1 and 2016\r\n        if(regs[3] &lt; 0 || regs[3] &gt; new Date().getFullYear()) {\r\n          alert(\"Invalid value for year: \" + regs[3] + \" - must be between 1 and \" + (new Date()).getFullYear());\r\n          form.date.focus();\r\n          return false;\r\n        }\r\n      } else if(isNaN(form.date.value)) {   \/\/ check if input is not a number\r\n        alert(\"You entered a string.\");\r\n        form.date.focus();\r\n        return false;\r\n      }\r\n    }\r\n       else {\r\n        alert(\"No input was given!\");\r\n        form.date.focus();\r\n        return false;\r\n      }\r\n  }\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Let&#8217;s now try 5 different inputs:<\/p>\n<p>1. Give an invalid date:<br \/>\n<figure id=\"attachment_10914\" aria-describedby=\"caption-attachment-10914\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-2.jpg\" rel=\"attachment wp-att-10914\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-2.jpg\" alt=\"Invalid Date\" width=\"820\" height=\"241\" class=\"size-full wp-image-10914\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-2-300x88.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-2-768x226.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10914\" class=\"wp-caption-text\">Invalid Date<\/figcaption><\/figure><\/p>\n<p>2. Give an invalid month:<br \/>\n<figure id=\"attachment_10915\" aria-describedby=\"caption-attachment-10915\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-3.jpg\" rel=\"attachment wp-att-10915\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-3.jpg\" alt=\"Invalid Month\" width=\"820\" height=\"241\" class=\"size-full wp-image-10915\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-3-300x88.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-3-768x226.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10915\" class=\"wp-caption-text\">Invalid Month<\/figcaption><\/figure><\/p>\n<p>3. Give an invalid year:<br \/>\n<figure id=\"attachment_10917\" aria-describedby=\"caption-attachment-10917\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-4.jpg\" rel=\"attachment wp-att-10917\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-4.jpg\" alt=\"Invalid Year\" width=\"820\" height=\"241\" class=\"size-full wp-image-10917\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-4.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-4-300x88.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-4-768x226.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10917\" class=\"wp-caption-text\">Invalid Year<\/figcaption><\/figure><\/p>\n<p>If more that one of the requirements is not met, like both date and month is invalid, only the alert of the first invalid input argument will be shown and you will be focused to the input again.<\/p>\n<p>4. Do not write anything (empty input):<br \/>\n<figure id=\"attachment_10918\" aria-describedby=\"caption-attachment-10918\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-5.jpg\" rel=\"attachment wp-att-10918\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-5.jpg\" alt=\"Empty Input\" width=\"820\" height=\"241\" class=\"size-full wp-image-10918\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-5.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-5-300x88.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-5-768x226.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10918\" class=\"wp-caption-text\">Empty Input<\/figcaption><\/figure><\/p>\n<p>5. Write a string, not a number:<br \/>\n<figure id=\"attachment_10934\" aria-describedby=\"caption-attachment-10934\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation6.jpg\" rel=\"attachment wp-att-10934\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation6.jpg\" alt=\"String Input\" width=\"820\" height=\"241\" class=\"size-full wp-image-10934\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation6.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation6-300x88.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation6-768x226.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10934\" class=\"wp-caption-text\">String Input<\/figcaption><\/figure><\/p>\n<h3>2.2 Example 2<\/h3>\n<p>This is basically the same, but this time, we check the number limit for day, month and year inside the regular expression:<\/p>\n<pre class=\"brush:js\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nfunction checkDate(form){\r\n\/\/ control the number range inside the regular pattern\r\nvar datePattern = \/^[0-3]?[0-9]\\\/[0-1]?[0-9]\\\/[0-2][0-9][0-9][0-9]$\/;\r\n  if(form.date.value.match(datePattern)) {\r\n    alert(\"Correct Date\");\r\n  }\r\n  else\r\n    alert(\"Invalid Date\");\r\n}\r\n&lt;script&gt;\r\n<\/pre>\n<p>This will throw the message &#8220;Invalid Date&#8221; for any input not matching the one in the pattern. So we&#8217;re not checking each number individually, but using the regular expression alert the user if the date is correct or not. Below is shown a out of bounds date.<br \/>\n<figure id=\"attachment_10922\" aria-describedby=\"caption-attachment-10922\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-7.jpg\" rel=\"attachment wp-att-10922\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-7.jpg\" alt=\"Regular Expressions for Conditions\" width=\"820\" height=\"241\" class=\"size-full wp-image-10922\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-7.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-7-300x88.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-7-768x226.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10922\" class=\"wp-caption-text\">Regular Expressions for Conditions<\/figcaption><\/figure><\/p>\n<h3>2.3 Example 3<\/h3>\n<p>Lastly, let&#8217;s also say something about different date formats. For example, the U.S. uses this format <code>mm\/dd\/yyyy<\/code>. Changing our code to match this kind of format would result in the same one as before except the regular expression line:<\/p>\n<pre class=\"brush:js\">\r\nvar datePattern = \/^[0-1]?[0-9]\\\/[0-3]?[0-9]\\\/[0-2][0-9][0-9][0-9]$\/;\r\n<\/pre>\n<p>Now we can enter a date in the <code>mm\/dd\/yyyy<\/code> format like so:<br \/>\n<figure id=\"attachment_10926\" aria-describedby=\"caption-attachment-10926\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-8.jpg\" rel=\"attachment wp-att-10926\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-8.jpg\" alt=\"Date Format - mm\/dd\/yyyy\" width=\"820\" height=\"241\" class=\"size-full wp-image-10926\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-8.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-8-300x88.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-8-768x226.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10926\" class=\"wp-caption-text\">Date Format &#8211; mm\/dd\/yyyy<\/figcaption><\/figure><\/p>\n<p>In a similar manner, other date formatting like <code>dd.mm.yyyy<\/code> could be achieved just by changing the regular expression:<\/p>\n<pre class=\"brush:js\">\r\nvar datePattern = \/^[0-3]?[0-9]\\.[0-1]?[0-9]\\.[0-2][0-9][0-9][0-9]$\/;\r\n<\/pre>\n<figure id=\"attachment_10931\" aria-describedby=\"caption-attachment-10931\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-9.jpg\" rel=\"attachment wp-att-10931\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-9.jpg\" alt=\"Date Format dd.mm.yyyy\" width=\"820\" height=\"241\" class=\"size-full wp-image-10931\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-9.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-9-300x88.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-9-768x226.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10931\" class=\"wp-caption-text\">Date Format dd.mm.yyyy<\/figcaption><\/figure>\n<h2>3. The Final Example<\/h2>\n<p>The final example will also handle something we haven&#8217;t mentioned: the days of a month that vary from year to year, like february. For this we add another function which will return the date of a specific month of a year and then we&#8217;ll use this function to compare the maximum day of that month with the given value.<\/p>\n<pre class=\"brush:js\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\nfunction daysInMonth(month,year) {\r\n    return new Date(year, month, 0).getDate();\r\n}\r\n\r\n\/\/new function to handle validation\r\n function checkDate(form)\r\n  {\r\n    \/\/ regular expression to match required date format\r\n    re = \/^(\\d{1,2})\\\/(\\d{1,2})\\\/(\\d{4})$\/;\r\n    \/\/ ^ means begin, \\d means expect a digit within {n1, n2}, $ means end with.\r\n    if(form.date.value != '') { \/\/ check to see the input is not left empty\r\n      if(regs = form.date.value.match(re)) {  \/\/ check and save the general format matching\r\n        \/\/ day value between 1 and 31\r\n        if(regs[1] &lt; 1 || regs[1] &gt; 31 || regs[1] &gt; daysInMonth(regs[2], regs[3])) { \/\/ check for month days\r\n          alert(\"Invalid value for day: \" + regs[1]); \/\/ alert user to check day again\r\n          form.date.focus();  \/\/ give focus to the input field\r\n          return false;\r\n        }\r\n        \/\/ month value between 1 and 12\r\n        if(regs[2] &lt; 1 || regs[2] &gt; 12) {\r\n          alert(\"Invalid value for month: \" + regs[2]);\r\n          form.date.focus();\r\n          return false;\r\n        }\r\n        \/\/ year value between 1 and 2016\r\n        if(regs[3] &lt; 0 || regs[3] &gt; new Date().getFullYear()) {\r\n          alert(\"Invalid value for year: \" + regs[3] + \" - must be between 1 and \" + (new Date()).getFullYear());\r\n          form.date.focus();\r\n          return false;\r\n        }\r\n      } else if(isNaN(form.date.value)) { \/\/ check if input is not a number\r\n        alert(\"You entered a string.\");\r\n        form.date.focus();\r\n        return false;\r\n      }\r\n    }\r\n    else {\r\n        alert(\"No input was given!\");\r\n        form.date.focus();\r\n        return false;\r\n      }\r\n  }\r\n&lt;script&gt;\r\n<\/pre>\n<p>Now everything is checked:<br \/>\n<figure id=\"attachment_10937\" aria-describedby=\"caption-attachment-10937\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-10.jpg\" rel=\"attachment wp-att-10937\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-10.jpg\" alt=\"Checking for Leap Years reflected in Months Days\" width=\"820\" height=\"241\" class=\"size-full wp-image-10937\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-10.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-10-300x88.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation-10-768x226.jpg 768w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-10937\" class=\"wp-caption-text\">Checking for Leap Years reflected in Months Days<\/figcaption><\/figure><\/p>\n<h2>4. Conclusion<\/h2>\n<p>To conclude, it is important to keep it simple. Sometimes, regular expressions might confuse you, but that is a really short way of handling it. However, feel free to be more specific in your code using the last example for your own clarity. Of course, you can also think of other ways of validating dates in javascript, but this is one functional example ready to be used.<\/p>\n<h2>5. Download the source code<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/> You can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/02\/js-date-validation.zip\"><strong>Javascript Date Validation<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The aim of this article is to validate date input in javascript. When getting information from a user for insertion into a database, or use in other processing, it&#8217;s important to control what the user can enter. Otherwise you can end up with values in the database that have no relation to reality. Javascript does &hellip;<\/p>\n","protected":false},"author":75,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[144,333],"class_list":["post-10904","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-date","tag-validation"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Javascript Date Validation Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this article is to validate date input in javascript. When getting information from a user for insertion into a database, or use in other\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript Date Validation Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this article is to validate date input in javascript. When getting information from a user for insertion into a database, or use in other\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2016-02-15T14:15:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-10T14:19:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"Javascript Date Validation Example\",\"datePublished\":\"2016-02-15T14:15:06+00:00\",\"dateModified\":\"2018-01-10T14:19:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/\"},\"wordCount\":721,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"date\",\"validation\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/\",\"name\":\"Javascript Date Validation Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2016-02-15T14:15:06+00:00\",\"dateModified\":\"2018-01-10T14:19:44+00:00\",\"description\":\"The aim of this article is to validate date input in javascript. When getting information from a user for insertion into a database, or use in other\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Javascript Date Validation Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Javascript Date Validation Example - Web Code Geeks - 2026","description":"The aim of this article is to validate date input in javascript. When getting information from a user for insertion into a database, or use in other","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/","og_locale":"en_US","og_type":"article","og_title":"Javascript Date Validation Example - Web Code Geeks - 2026","og_description":"The aim of this article is to validate date input in javascript. When getting information from a user for insertion into a database, or use in other","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2016-02-15T14:15:06+00:00","article_modified_time":"2018-01-10T14:19:44+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"Javascript Date Validation Example","datePublished":"2016-02-15T14:15:06+00:00","dateModified":"2018-01-10T14:19:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/"},"wordCount":721,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["date","validation"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/","name":"Javascript Date Validation Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2016-02-15T14:15:06+00:00","dateModified":"2018-01-10T14:19:44+00:00","description":"The aim of this article is to validate date input in javascript. When getting information from a user for insertion into a database, or use in other","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/javascript-date-validation-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Javascript Date Validation Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=10904"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/10904\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=10904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=10904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=10904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}