Как я могу проверить, что максимальное поле больше поля 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'},
...
}
});