如何使用jquery验证来比较两个下拉值

Question

我有两个下拉（开始时间&结束时间），我想验证使用jquery验证，确保结束时间大于开始时间，但我无法获得它工作。无论我放什么，它总是显示错误信息。有人可以看看我的代码，并告诉我我做错了什么吗？

JSFIDDLE example here

<label for="start_time">Start Time:<font color="red">*</font></label> 
      <select name = 'start_time_hour'> 
       <option value = '10'>10</option> 
       <option value = '11'>11</option> 
       <option value = '12'>12</option> 
      </select> 
<label for="end_time_hour">End Time:<font color="red">*</font></label> 
      <select name = 'end_time_hour'> 
       <option value = '10'>10</option> 
       <option value = '11'>11</option> 
       <option value = '12'>12</option> 
      </select> 

的JavaScript

$(document).ready(function(){ 
    jQuery.validator.addMethod("le", function(value, element, param) { 
    return this.optional(element) || value <= $(param).val(); 
    }, "less"); 
    jQuery.validator.addMethod("ge", function(value, element, param) { 
    return this.optional(element) || value >= $(param).val(); 
    }, "greater"); 
$("#add").validate({ 
    event: "keyup", 
    highlight: function(element, errorClass, validClass) { 
      $(element).addClass(errorClass).removeClass(validClass); 
     }, 
rules:{ 
     start_time_hour:{le: "#end_time_hour"}, 
    end_time_hour:{ge: "#start_time_hour"}, 
    }, 
messages:{ 
    start_time_hour:{le: "Must be less than end time"}, 
    end_time_hour:{ge: "Must be greater than start time"}, 
}, 
}); 
}); 

Answer 1

的问题是，因为你是混合id属性和name属性。 参考：http://api.jquery.com/id-selector/和http://api.jquery.com/attribute-equals-selector/

通过在选择器中指示＃来选择具有给定id属性的单个元素，但是您使用的是name属性。

所以不引用不存在的id属性，你必须改变规则代码：

rules:{ 
    start_time_hour:{le: "end_time_hour"}, 
    end_time_hour:{ge: "start_time_hour"}, 
    } 

和您的验证程序：

jQuery.validator.addMethod("le", function(value, element, param) { 
    return this.optional(element) || value <= $("select[name="+param+"]").val(); 
}, "less"); 
jQuery.validator.addMethod("ge", function(value, element, param) { 
    return this.optional(element) || value >= $("select[name="+param+"]").val(); 
}, "greater"); 

（看看选择）

这里是一个工作小提琴：http://jsfiddle.net/uVnQ4/13/