Question

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

<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/

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

1 个答案: