1

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

JSFIDDLE 示例在这里

<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"},
},
});
});
4

1 回答 1

0

问题是因为您混合了 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/

于 2013-04-14T16:09:23.057 回答