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

由于小时和分钟的验证是独立的，因此您只需向两个输入字段添加单独的验证器即可。