Как использовать jQuery Validator для сравнения двух полей

Question

Я хочу проверить 2 поля ввода, сравнив одно с другим и убедившись, что второе больше первого.

Нужно ли добавлять собственный метод или я могу просто использовать имя переменной в методе диапазона? Если да, можете ли вы указать мне синтаксис?

var validateSection = function (theForm) {
$(theForm).validate({
    rules: {
        startPoint: {
            required: true,
            range: [0, 100]
        },
        endPoint: {
            required: true,
            range: [startPoint + 1, 100] //Is this possible if I set the function to run on any change to either field?
        },
}
});

if ($(theForm).valid()) {
    return true;
}
else {
    return false;
}
}

Код с пользовательским методом:

$.validator.addMethod("endGreaterThanBegin", function(value, element) {
    return endPoint > startPoint
}, "* End Point Should be Greater than Start");

var validateSection = function (theForm) {
    $(theForm).validate({
        rules: {
            startPoint: {
                required: true,
                range: [0, 100]
            },
            endPoint: {
                required: true,
                range: [1, 100],
                endGreaterThanBegin: true
            },
        }
    });
    if ($(theForm).valid()) {
        return true;
    }
    else {
        return false;
    }
}

Получение $ .validator не определено до того, как я получу форму, а затем validateSection не является функцией, когда я начинаю тестировать поля ввода

Answer 1

Необходимо добавить пользовательский метод проверки

Прототип -

$.validator.addMethod("endate_greater_startdate", function(value, element) {
    return enddate > startdate
}, "* Enddate should be greater than Startdate");

Проверка -

endate_greater_startdate : true

Проверьте для Demo , как другой пример, но это поможет отладку.

Answer 2

Javascript

$(function() {
    $.validator.addMethod('smaller_than', function (value, element, param) {
        return +$(element).val() < +$(param).val();
    });
    $.validator.addMethod('not_smaller_than', function (value, element, param) {
        return +$(element).val() > +$(param).val();
    });
    $('form').validate();
});

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form>
    value 1
    <input name="value1"
           data-rule-smaller_than="[name='value2']"
           data-msg-smaller_than="value 1 must be smaller than value 2" /><br/>
    value 2
    <input name="value2"
           data-rule-not_smaller_than="[name='value1']"
           data-msg-not_smaller_than="value 1 must be smaller than value 2"/><br/>
    <input type="submit"/>
</form>

JSFiddle