JQuery проверить меньше, чем

Question

Я пытаюсь написать валидатор "Меньше чем" для jQuery. Я хочу сравнить одно текстовое поле с другим, поэтому если у меня есть:

<input type="text" id="value1" /> <input type="text" id="value2" />

Я хочу, чтобы мой валидатор выглядел как

$('#myForm').validate({rules: { value1: { lessThan: "#value2" } } });

Я пробовал это, но не могу заставить его работать:

$.validator.addMethod('lessThan', function(value, element, param) {
    var i = parseInt(value);
    var j = parseInt($(param).val());
    return i >= j;
}, "Less Than");

Другой вопрос: куда мне поместить этот код? В $ (document) .ready или просто в теге?

Answer 1

Я идиот. Я сделал несколько опечаток в моем реальном коде и перепутал this.optional (элемент), который я вижу во многих методах валидатора. Вот рабочая функция:

$.validator.addMethod('lessThanEqual', function(value, element, param) {
    if (this.optional(element)) return true;
    var i = parseInt(value);
    var j = parseInt($(param).val());
    return i <= j;
}, "The value {0} must be less than {1}");

Вот сокращенная версия

$.validator.addMethod('lessThanEqual', function(value, element, param) {
    return this.optional(element) || parseInt(value) <= parseInt($(param).val());
}, "The value {0} must be less than {1}");

Теперь мне нужно выяснить, как повторно запустить проверку для поля 1 при изменении поля 2.

Answer 2

Вы можете вставить свой метод проверки в любой готовый блок документа, как показано ниже.

$().ready(function() {

    $.validator.addMethod("lessThan",
        function(value, element, param) {
            var i = parseFloat(value);
            var j = parseFloat(param);
            return (i < j) ? true : false;
        }
    );

});

Я пытался сохранить это простым, чтобы вы могли изменить его. Если метод называется "lessThan", он должен сделать именно это. Если ваш метод выполняет «меньше или равно», рассмотрите более подходящее имя.

Обратите внимание, что я также использую parseFloat, что обеспечивает более гибкую методику, чем parseInt.

Из вашего валидатора вы правильно его использовали; так что для проверки, скажем, менее 10:

$('#myForm').validate({ rules: { value1: { lessThan: "10"}} });

Удачи!

Answer 3

Я думаю, что вы можете сделать это без написания собственного метода валидатора.

$('#myForm').validate({
    rules: {
         value1: {
             maxlength: $('#value2').val().length
         }
    }
});

$('#value2').change(function() {
    $('#value1').rules('remove', 'maxlength').rules('add', {
         maxlength: $('#value2').val().length
    });
});

или даже лучше без дублирования кода

function getRule() {
    return {
        maxlength: $('#value2').val().length
    };
}

$('#myForm').validate({
    rules: {
         value1: getRule()
    }
});

$('#value2').change(function() {
    $('#value1').rules('remove', 'maxlength').rules('add', getRule());
});

Answer 4

Я думаю, что лучше использовать атрибут HTML max.

<input type="number" placeholder="Marks" required name="marks" max="100">

проверка будет. Пожалуйста, введите значение, меньшее или равное 100. Где вы также можете изменить максимальное значение на 99 только для значения меньше 100.