Validation Plugin to re-validate group fields using datepicker

Validation Plugin to re-validate group fields using datepicker

Hi all,

I have three elements: 1 drop downlist, 2 textbox using datepicker. Each others have some criteria:
- Textbox 1 (date of birth): if (now - date of birth) < 18 ---> display Error 1.
-  Textbox 2 (issued date): if ( issued date -  date of birth) < 14 ---> display Error 2.

Whenever one changed, all elements are re-validated to check. Validation is re-validated when i manually select textbox.
Ex:
-Textbox 1: 5/5/1987 -> (return true, because (now - date of birth) > 18).
-Textbox 2: 5/5/2000 -> Error 2 (return false,  because ( issued date -  date of birth ) <14 ).

If i change textbox 1: 5/5/1980, textbox 2 isn't re-validated and still display error2, although (issued date - new date of birth) > 14. 
After that, i want extend to solve this problem with three, four...  concerned  text box with criteria. Anyone help me???

Here my html code:
  2. <form id="mainForm">
  3. <table>
  4. <tr>
  5. <td>
  6. <select id="drlIdType">
  7. <option value="IC">IdentityCard</option>
  8. <option value="PP">Passport</option>
  9. </select>
  10. </td>
  11. </tr>
  12. <tr>
  13. <td>DOB(DD/MM/YYYY):</td>
  14. <td><input type="text" id="txtDOB" class="datepicker" name="txtDOB"></input></td>
  15. </tr>
  16. <tr>
  17. <td>Issued Date:</td>
  18. <td><input type="text" id="txtIdIssueDate" class="datepicker" name="txtIdIssueDate"></input></td>
  19. </tr>
  20. </table>
  21. </form>
Here my js code:
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $('.datepicker').datepicker();
  6. //Validate email and phone number
  7.             $("#mainForm").validate({
  8.                 messages:
  9.                 {
  10.                     txtDOB:
  11.                     {
  12.                         checkDateOfBirth: "Error1!"
  13.                     },
  14.    txtIdIssueDate:
  15.    {
  16. checkIdentityCard: "Error2!"
  17.    }
  18.                 },
  19.                 invalidHandler: function(event, validator) {
  20.                     event.preventDefault();
  21.                     event.stopPropagation();
  22.                 }
  23.             });
  25. /**
  26.             * Check date of birth
  27.             * @return: true if (now - date of birth) >= 18
  28.             */
  29.             $.validator.addMethod("checkDateOfBirth", function(value, element){
  30.                       var inputDate = $('#txtDOB').val();
  31.                       var currdate = new Date();
  32.                       var yearInput = 18;
  33.                       return compareDate(inputDate, currdate, yearInput, '>=');
  34.             });
  36.             /**
  37.             * Check identity card if idtype = IC
  38.             * @return: true if (issuedt date - date of birth) >= 14
  39.             */
  40.             $.validator.addMethod("checkIdentityCard", function(value, element){
  41.                       if ($("#drlIdType").val() == 'IC')
  42.                       {
  43.                           frDate = $("#txtDOB").val();
  44.                           var toDate = $("#txtIdIssueDate").val();
  45.                           var yearInput = 14;
  46.                           return compareDateStr(frDate, toDate, yearInput, '>=');
  47.                       }
  48.                       else
  49.                       {
  50.                         return true;
  51.                       }
  52.             });
  54.             var test = {
  55.                 txtCheckDateOfBirth: {
  56.                     checkDateOfBirth: true
  57.                 },
  58. txtIdIssueDate: {
  59. checkIdentityCard: true
  60. }
  61.             }
  63.             $("#txtDOB").rules('add', test['txtCheckDateOfBirth']);
  64. $("#txtIdIssueDate").rules('add', test['txtIdIssueDate']);
  65. $(".datepicker").datepicker('option', {
  66.                 onSelect: function(dateText, inst){
  67. $(this).valid();
  68.                 }
  69.             });
  70. });

  72. /**
  73.         * Comparing two date fullyear
  74.         * @param {String} frDtInput : from date input string with format: dd/mm/yyyy
  75.         * @param {String} toDtInput: to date input string with format: dd/mm/yyyy
  76.         * @param {Number} yearInput : input number to be compared
  77.         * @param {String} comparision operator
  78.         * @return {Boolean} True if (toDtInput - frDtInput) > 0 else False
  79.         */
  80.         function compareDateStr(frDtInput, toDtInput, yearInput, compareOper)
  81.         {
  82.             if (frDtInput && toDtInput && yearInput)
  83.             {
  84.                 var arrDate = "";
  85.                 arrDate = frDtInput.split("/");
  86.                 var day = arrDate[0];
  87.                 var month = arrDate[1];
  88.                 var year = arrDate[2];

  90.                 var frDate = new Date();
  91.                 frDate.setFullYear(year, month-1, day);

  93.                 arrDate = toDtInput.split("/");
  94.                 day = arrDate[0];
  95.                 month = arrDate[1];
  96.                 year = arrDate[2];

  98.                 var toDate = new Date();
  99.                 toDate.setFullYear(year, month, day);
  100.                 toDate.setFullYear(toDate.getFullYear() - yearInput);

  102.                 if (compareOper == '>='){
  103.                     return (toDate - frDate >= 0 ? true : false);
  104.                 } else if (compareOper == '<=') {
  105.                     return (toDate - frDate <= 0 ? true : false);
  106.                 } else if (compareOper == '>') {
  107.                     return (toDate - frDate > 0 ? true : false);
  108.                 } else if (compareOper == '<') {
  109.                     return (toDate - frDate < 0 ? true : false);
  110.                 } else if (compareOper == '=') {
  111.                     return (toDate - frDate <= 0 ? true : false);
  112.                 } else {
  113.                     return false;
  114.                 }
  115.             }
  116.             
  117.         }

  119. /**
  120.         * Comparing two date fullyear
  121.         * @param {String} frDtInput : from date input string with format: dd/mm/yyyy
  122.         * @param {Date} toDtInput: to date input 
  123.         * @param {Number} yearInput : input number to be compared
  124.         * @param {String} comparision operator
  125.         * @return {Boolean} True if (toDtInput - frDtInput) > 0 else False
  126.         */
  127.         function compareDate(frDtInput, toDtInput, yearInput, compareOper)
  128.         {
  129.             if (frDtInput && toDtInput && yearInput)
  130.             {
  131.                 var arrDate = "";
  132.                 arrDate = frDtInput.split("/");
  133.                 var day = arrDate[0];
  134.                 var month = arrDate[1];
  135.                 var year = arrDate[2];

  137.                 var frDate = new Date();
  138.                 frDate.setFullYear(year, month-1, day);

  140.                 var toDate = new Date();
  141.                 toDate = toDtInput.setFullYear(toDtInput.getFullYear() - yearInput);
  142.                 if (compareOper == '>='){
  143.                     return (toDate - frDate >= 0 ? true : false);
  144.                 } else if (compareOper == '<=') {
  145.                     return (toDate - frDate <= 0 ? true : false);
  146.                 } else if (compareOper == '>') {
  147.                     return (toDate - frDate > 0 ? true : false);
  148.                 } else if (compareOper == '<') {
  149.                     return (toDate - frDate < 0 ? true : false);
  150.                 } else if (compareOper == '=') {
  151.                     return (toDate - frDate <= 0 ? true : false);
  152.                 } else {
  153.                     return false;
  154.                 }
  155.             }
  156.             
  157.         }
  158. </script>