Ненавязчивая проверка jQuery для составного HTML-элемента управления

Question

У меня есть следующий элемент управления, представляющий время:

<div id="xxx">
   <input type="text" name="xxx.hour"/>
   <input type="text" name="xxx.minute"/>
</div>

Поскольку я хочу добавить проверку, я добавил:

<div id="xxx" data-val="true" data-val-time="Time no valid">
   <input type="text" name="xxx.hour"/>
   <input type="text" name="xxx.minute"/>
</div>

И я добавил адаптер и метод:

$.validator.addMethod("time_method", function (val, el, params) {

    var elementId = $(el).attr('id');
    alert('id ' + elementId);
    var hour= $(el).children('input[name$=.hour]').val();
    var minute= $(el).children('input[name$=.minute]').val();

    return hour>= 0 && hour<24 && minute>=0 && minute<23;
});

$.validator.unobtrusive.adapters.add("time", {},
function (options) {
    options.rules["time_method"] = true;
    options.messages["time_method"] = options.message;
});

Но метод "time_method" никогда не выполняется, я думаю, потому что jquery.validate применяется только к входным тегам, я прав?

Как лучше всего это сделать?

ОБНОВЛЕНИЕ: Я знаю, что это можно сделать несколькими способами, меня просто интересует возможность сделать это таким образом. Я упростил задачу, чтобы показать очень маленький и глупый пример того, чего я пытаюсь достичь.

Answer 1

демо: http://so.devilmaycode.it/jquery-unobstrusive-validation-on-composite-html-control

---

ваш код должен выглядеть примерно так:

$(function() {
    $.validator.addMethod('time_method',function(val, el) {
        var re,max;
        if (el.id == 'xxx_hour') {
            re = /^\d{1,2}$/;
            max = 24;
        }
        if (el.id == 'xxx_minute') {
            re = /^\d{2}$/;
            max = 59;
        }
        return re.test(val) && val >= 0 && val <= max;
    },
    'Time no valid');

    $("#xxx").validate({
        rules: {
            xxx_hour: 'time_method',
            xxx_minute: 'time_method',
        }
    });
});

ваш html примерно такой:

<form id="xxx">  
 <input type="text" name="xxx_hour" id="xxx_hour" maxlength="2"/>
 <input type="text" name="xxx_minute" id="xxx_minute" maxlength="2"/>
</form>

Answer 2

Поскольку события нажатия клавиш и изменения всплывают, вы можете использовать

//in $.ready
$('div#xxx').keypress(function(){
    //Do validation
}

Заменить нажатие клавиш изменением, если вы хотите, чтобы проверка происходила, когда элемент (ы) ввода теряют фокус.

Answer 3

Почему бы не использовать что-то вроде этого: http://jsfiddle.net/3KCd4/2/

Answer 4

Я бы сказал проще. Отдельные сообщения для минут и часов или отдельные входы и дополнительные адаптеры кажутся мне слишком сложными. Все, что вам нужно, это просто хорошее регулярное выражение для ввода времени. Адаптер валидатора Regex уже включен в плагин.

<input data-val="true" data-val-regex="Time is not valid" data-val-regex-pattern="^([0-1][0-9]|[2][0-3]):([0-5][0-9])$"
        type="text" id="time" name="time" value="" />

Идея применения к нему регулярных выражений - моя. Шаблон регулярного выражения взят из здесь .

Этот плагин валидации (и, вероятно, большинство плагинов валидации) зависит от input специфических свойств элемента, которые в первую очередь value, а затем от поддерживаемых событий, с которыми может инициироваться валидация. div не поддерживает ни value, ни onchange, ни другие события.

Если проверяемый объект настолько сложен, я бы предложил записать эту проверку на сервер или просто в форме отправки события, без этих динамических проверок и сообщений об ошибках, показывающих -ups.

Answer 5

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