{"id":520,"date":"2010-03-31T15:51:06","date_gmt":"2010-03-31T10:21:06","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=520"},"modified":"2017-04-17T15:58:45","modified_gmt":"2017-04-17T10:28:45","slug":"client-side-date-validation-using-jquery-plugins","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/client-side-date-validation-using-jquery-plugins\/","title":{"rendered":"Client side date validation using jQuery plugins"},"content":{"rendered":"<p>I have been facing problem of validating a text input field for a valid date. We are using two popular jquery plugins : jQuery validation and <a href=\"http:\/\/jqueryui.com\/demos\/datepicker\" target=\"_blank\">jQuery UI datepicker<\/a> for client side validation.<\/p>\n<p>I googled it and found a good solution here <a href=\"http:\/\/stackoverflow.com\/questions\/511439\/custom-date-format-with-jquery-validation-plugin\" target=\"_blank\">http:\/\/stackoverflow.com\/questions\/511439\/custom-date-format-with-jquery-validation-plugin<\/a> but it was validating only the formatting i.e. 30-Feb-2010 is a valid date if the formating string was dd-MMM-yyyy. In our case 30-Feb-2010 should be invalid date.<\/p>\n<p>The solution I got is to define custom validator for date as shown below :<\/p>\n<blockquote>\n<div class=\"code\">\n<pre lang=\"javascript\"><script type=\"text\/javascript\">\r\n         jQuery.validator.addMethod(\r\n               \"customDateValidator\",\r\n                function(value, element) {\r\n\t\t\t\/\/ parseDate throws exception if the value is invalid\r\n                     try{jQuery.datepicker.parseDate( 'm\/dd\/yy', value);return true;}\r\n                     catch(e){return false;}\r\n                    },\r\n                    \"Please enter a valid date\"\r\n                );\r\n<\/script>\r\n<\/pre>\n<\/div>\n<\/blockquote>\n<p>Now I am able to use this custom validator as :<\/p>\n<blockquote>\n<div class=\"code\">\n<pre lang=\"javascript\"><script type=\"text\/javascript\">\r\n\t\/\/ myDateInputField is the id of text input field\r\n        \/\/ apply the custom validator\r\n        jQuery(\"#myDateInputField\").rules(\"add\", {customDateValidator:true});\r\n        \/\/ apply the date picker\r\n        jQuery(\"#myDateInputField\").datepicker();\r\n<\/script>\r\n<\/pre>\n<\/div>\n<\/blockquote>\n<p>Hope it helps you.<\/p>\n<p>~~~ Bhagwat Kumar ~~~~<br \/>\nbhagwat@intelligrape.com<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have been facing problem of validating a text input field for a valid date. We are using two popular jquery plugins : jQuery validation and jQuery UI datepicker for client side validation. I googled it and found a good solution here http:\/\/stackoverflow.com\/questions\/511439\/custom-date-format-with-jquery-validation-plugin but it was validating only the formatting i.e. 30-Feb-2010 is a valid [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":5},"categories":[1],"tags":[201,200,199],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/520"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=520"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/520\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=520"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=520"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=520"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}