Как я могу проверить, что максимальное поле больше поля min?

У меня есть несколько наборов полей min и max в форме, где пользователь может указать диапазон, заполнив min и max. Я использую плагин jQuery Validate для проверки моей формы. Я хотел бы установить правило проверки, которое гарантирует, что максимальное поле больше min. Это будет вызываться всякий раз, когда изменяются значения max или min.

Я знаю, что могу настроить какой-то базовый пользовательский метод проверки следующим образом:

$.validator.addMethod("greaterThan",
    function(value, max, min){
        return parseInt(value) > parseInt($(min).val());
    }, "Max must be greater than min"
);

Затем добавьте правило для элемента max:

rules: {
    maxTruck: {greaterThan: '#minTruck'}
}

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

И затем еще одна вещь, которую я хотел бы решить - есть ли какой-либо простой способ, которым я могу применить это в целом, вместо того, чтобы перечислить каждое максимальное поле и к которому он привязан? Чтобы я мог просто иметь класс min и max и называть что-то вроде:

$(".max").rules('add', { greaterThan: ".min" });

И каким-то образом настройте метод, чтобы иметь возможность выяснить (возможно, на основе общего атрибута?), который min max-поле сопрягается с?

Update:

Основная логика, о которой я упоминал в этом сообщении, можно увидеть в этом jsfiddle. Тем не менее, я не очень много работал над этим - я ищу логику, чтобы в основном связывать наборы полей min и max так, как я описывал. И я не знаю, является ли это лучшим способом сделать это. Как я уже говорил, мне бы хотелось сделать это в целом, чтобы мне не приходилось ссылаться на поля min и max по id.

Ответ 1

Хорошо, здесь что-то должно сработать. Правило основано на встроенном методе equalTo:

$.validator.addMethod("greaterThan", function (value, element, param) {
    var $min = $(param);

    if (this.settings.onfocusout) {
        $min.off(".validate-greaterThan").on("blur.validate-greaterThan", function () {
            $(element).valid();
        });
    }

    return parseInt(value) > parseInt($min.val());
}, "Max must be greater than min");

Пример: http://jsfiddle.net/tUPQc/2/

Чтобы сделать правило более универсальным, вам нужно будет использовать addClassRules:

$.validator.addMethod("greaterThan", function (value, element, param) {
    var $element = $(element)
        , $min;

    if (typeof(param) === "string") {
        $min = $(param);
    } else {
        $min = $("#" + $element.data("min"));
    }

    if (this.settings.onfocusout) {
        $min.off(".validate-greaterThan").on("blur.validate-greaterThan", function () {
            $element.valid();
        });
    }
    return parseInt(value) > parseInt($min.val());
}, "Max must be greater than min");

$.validator.addClassRules({
    greaterThan: {
        greaterThan: true
    }
});

Затем в вашем HTML:

<input id="maxTruck" name="maxTruck" type="text" class="number greaterThan" data-min="minTruck" />

Пример: http://jsfiddle.net/tUPQc/3/

Ответ 2

Простой и эффективный способ использования addmethod

$.validator.addMethod("greaterThan",

function (value, element, param) {
  var $min = $(param);
  if (this.settings.onfocusout) {
    $min.off(".validate-greaterThan").on("blur.validate-greaterThan", function () {
      $(element).valid();
    });
  }
  return parseInt(value) > parseInt($min.val());
}, "Must be greater than to field 1");

проверяющий код

filed2_name: {

            greaterThan: '#filed1_id'
        },

второй я предпочитаю сначала

$.validator.addMethod('le', function(value, element, param) {
      return this.optional(element) || value <= $(param).val();
}, 'Invalid value');
$.validator.addMethod('ge', function(value, element, param) {
      return this.optional(element) || value >= $(param).val();
}, 'Invalid value');

$('form').validate({rules: {
            fieldName1: {le: '#fieldID2'},
            fieldName2: {ge: '#fieldID1'},
             ...
      },
      messages: {
            fieldName1: {le: 'Must be less than or equal to field 2'},
            fieldName2: {ge: 'Must be greater than or equal to field 1'},
            ...
      }
});