2014-01-15 36 views
0

之前运行我有以下JQuery验证附加到表单具有两个日期选择字段:jquery.form验证jquery.ui日期选择器完成字段完成

$("#submitform").validate(
     { 
      debug: true, 
      rules: { 
       summary: { 
        validateWidthLimits: {max: 49, min: 5} 
       }, 
       description: { 
        validateWidthLimits: {max: 49, min: 5} 
       }, 
       start_date: { //HERE** 
        validateDate: {field: "#end_date", when: "before"} 
       }, 
       end_date: { //HERE**       
        validateDate: {field: "#start_date", when: "after"} 
       }, 
       geocomplete: { 
        validateWidthLimits: {max: 500, min: 5} 
       } 
      }, 
      submitHandler: function(event, validator) { 
       // submitForm(); 
       return false; 
      }, 
      invalidHandler: function(event, validator) { 
       setFeedback2($("#mainfbf"), "All required fields must be filled out", true); 
       return false; 
      } 
    }); 

当我使用日期选择器与例如起始日期选择日期,我希望start_date检查它是否在end_date之前,反之亦然。

验证函数是:

$.validator.addMethod("validateDate", function(value, element, param) { 
if (!value) { 
    message = "*"; 
} else if (!value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/)) { 
    message = "Format dd/mm/yyyy"; 
} 
//default to true 
var fieldComparison = true; 

//Validate against another date field (before:after) 
if (param.field) { 
    var compareTo = $(param.field).val(); 

    var compareToDate = Date.parse(compareTo,"dd/MM/yyyy"); 
    var valueDate = Date.parse(value, "dd/MM/yyyy"); 
    var comparisonInt = valueDate.compareTo(compareToDate);//remove line 

    if (param.when == "after" && ((compareToDate.compareTo(valueDate)) < 0)) { 
     fieldComparison = false; 
     message = "Start date before End date"; 
    } else if (param.when == "before" && ((compareToDate.compareTo(valueDate)) < 0)) { 
     fieldComparison = false; 
     message = "End date before Start date"; 
    } 
} 

if (value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/) && fieldComparison) { 
    return true; 
} else { 
    return feedBackOverride(param); 
} 

},messageFunction);

现在这个逻辑并不完整,但是当我从datepicker中选择一个日期时,它会被卡住,它会根据旧值而不是新选择的值进行验证。

日期选择器代码:

$(".datepicker1").datepicker({ 
     minDate:0, 
     dateFormat : 'dd/mm/yy', 
     changeMonth : true, 
     changeYear : true, 
     yearRange : '-0:+10' 
    }); 

任何想法ofhow强制验证等到领域已实际完成?

回答

0

你可以有一个隐藏的字段为你验证这个规则。

hiddenDate: { 
      required: function() 
      { 
       var MESSAGE = 'VALUES NOT ENTERED'; 

       //if Start Date and End Date is filled then do date comparison 
       //otherwise return false since the fields are not filled. 

       if($('#start_DATE').val() && $('#end_DATE').val()) 
       { 
        /* Verify start and end dates are correctly formatted */ 

        if(isStartDateValid && isEndDateValid) 
        { 
        var selectedStart = $('#start_DATE').val(); 
        var selectedEnd = $('#end_DATE').val(); 

        if(selectedStart > selectedEnd) 
         MESSAGE = "Start date greater than end date" 
        else 
         MESSAGE = "Start date smaller than end date" 

        } 

       } 

       return MESSAGE ; 
      } 
      } 

我添加了消息,这将是true/false的值。

+0

不错的想法,我想使用datepicker select:方法,但很适合验证逻辑的其余部分。谢谢Nupur – sapatos