Confirm date in dd / mm / yyyy format with jQuery Validate

Question

I take into account the date of birth and date of death. Confirmation Required

• date of death must be greater than date of birth.
• Date Format dd / mm / yyyy
• Dates will be less than or equal to today.

Verification does not work properly and cannot solve the problem. Please, help.

Script code

Used JS Libraries

• JQuery UI for Calendar / Datepicker
• JQuery validation for form validation

• Additional methods for validation library

  var today = new Date(); var authorValidator = $("#itemAuthorForm").validate({ rules : { dateOfBirth : { required : false, date : true, dateITA : true, dateLessThan : '#expiredDate' }, expiredDate : { required : false, date : true, dateITA : true, dateGreaterThan : "#dateOfBirth" } }, onfocusout : function(element) { if ($(element).val()) { $(element).valid(); } } }); var dateOptionsDOE = { maxDate : today, dateFormat : "dd/mm/yy", changeMonth : true, changeYear : true, onClose : function(selectedDate) { $("#dateOfBirth").datepicker("option", "maxDate", selectedDate); } }; var dateOptionsDOB = { maxDate : today, dateFormat : "dd/mm/yy", changeMonth : true, changeYear : true, onClose : function(selectedDate) { $("#expiredDate").datepicker("option", "minDate", selectedDate); } }; jQuery.validator.addMethod("dateGreaterThan", function(value, element, params) { if ($(params).val() === "") return true; if (!/Invalid|NaN/.test(new Date(value))) { return new Date(value) > new Date($(params).val()); } return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val())); }, 'Must be greater than {0}.'); jQuery.validator.addMethod("dateLessThan", function(value, element, params) { if ($(params).val() === "") return true; if (!/Invalid|NaN/.test(new Date(value))) { return new Date(value) < new Date($(params).val()); } return isNaN(value) && isNaN($(params).val()) || (Number(value) < Number($(params).val())); }, 'Must be less than {0}.'); $("#expiredDate").datepicker( $.extend({}, $.datepicker.regional['en-GB'], dateOptionsDOE)); $("#dateOfBirth").datepicker( $.extend({}, $.datepicker.regional['en-GB'], dateOptionsDOB)); 

Answer 1

You do not need a date validator. It does not support the dd / mm / yyyy format , and therefore you get the message "Please enter a valid date" for input, for example, 01/13/2014. You already have a dateITA validator that uses the dd / mm / yyyy format as needed.

Like the date validator, your code for dateGreaterThan and dateLessThan calls new Date for the input line and has the same parsing results. You can use this function to parse the date:

 function parseDMY(value) { var date = value.split("/"); var d = parseInt(date[0], 10), m = parseInt(date[1], 10), y = parseInt(date[2], 10); return new Date(y, m - 1, d); } 

Answer 2

It also checks in a leap year. This is a pure regex, so it is faster than any library (also faster than moment.js). But if you are going to use a lot of dates in your code, I recommend using moment.js

 var dateRegex = /^(?=\d)(?:(?:31(?!.(?:0?[2469]|11))|(?:30|29)(?!.0?2)|29(?=.0?2.(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(?:\x20|$))|(?:2[0-8]|1\d|0?[1-9]))([-.\/])(?:1[012]|0?[1-9])\1(?:1[6-9]|[2-9]\d)?\d\d(?:(?=\x20\d)\x20|$))?(((0?[1-9]|1[012])(:[0-5]\d){0,2}(\x20[AP]M))|([01]\d|2[0-3])(:[0-5]\d){1,2})?$/; console.log(dateRegex.test('21/01/1986')); 

http: //regexper.com / ....

Answer 3

If you use the js library of the moment, this is easy to do like this:

 jQuery.validator.addMethod("validDate", function(value, element) { return this.optional(element) || moment(value,"DD/MM/YYYY").isValid(); }, "Please enter a valid date in the format DD/MM/YYYY"); 

Answer 4

There was a similar problem in my project. After a lot, I found this solution:

 if ($.datepicker.parseDate("dd/mm/yy","17/06/2015") > $.datepicker.parseDate("dd/mm/yy","20/06/2015")) // do something 

You do not need plugins like jQuery Validate or Moment.js for this problem. We hope this solution helps.

Answer 5

This works great for me.

 $(document).ready(function () { $('#btn_move').click( function(){ var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/; var Val_date=$('#txt_date').val(); if(Val_date.match(dateformat)){ var seperator1 = Val_date.split('/'); var seperator2 = Val_date.split('-'); if (seperator1.length>1) { var splitdate = Val_date.split('/'); } else if (seperator2.length>1) { var splitdate = Val_date.split('-'); } var dd = parseInt(splitdate[0]); var mm = parseInt(splitdate[1]); var yy = parseInt(splitdate[2]); var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31]; if (mm==1 || mm>2) { if (dd>ListofDays[mm-1]) { alert('Invalid date format!'); return false; } } if (mm==2) { var lyear = false; if ( (!(yy % 4) && yy % 100) || !(yy % 400)) { lyear = true; } if ((lyear==false) && (dd>=29)) { alert('Invalid date format!'); return false; } if ((lyear==true) && (dd>29)) { alert('Invalid date format!'); return false; } } } else { alert("Invalid date format!"); return false; } }); }); 

Answer 6

This checks the dates dd / mm / yyyy. Edit your jquery.validate.js and add them.

Link (regular expression): regular expression to check the date format dd / mm / yyyy

 dateBR: function( value, element ) { return this.optional(element) || /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/.test(value); } messages: { dateBR: "Invalid date." } classRuleSettings: { dateBR: {dateBR: true} } 

Using:

 $( "#myForm" ).validate({ rules: { field: { dateBR: true } } });