1

jquery validate を使用して検証したい 2 つのドロップダウン (開始時間と終了時間) があり、終了時間が開始時間よりも大きいことを確認していますが、動作させることができません。何を入れても常にエラーメッセージが表示されます。誰かが私のコードを見て、私が間違っていることを教えてもらえますか?

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 に答える