Question

<form>
    <input type="date" id="date1" />
    <input type="time" id="time1" />

    <input type="date" id="date2" />
    <input type="time" id="time2" />
</form>

我的表单上有两个日期元素和两个时间元素。如果date1不为空，我希望能够time1，date2和time2则相同。如果date2 >= date1不为空，我还希望date1，如果date1 <= date2不为空，我也希望date2。{/ p>

在http://afarkas.github.io/webshim/demos/demos/forms.html#Custom-validity使用data-dependent-validation jsfiddle示例我可以看到如何执行这两个验证规则，但我看不到如何同时应用这两个验证规则。这可能吗？

Answer 1

这目前不可能。但是，使用DOM脚本有条件地设置所需属性并更改最小/最大属性应该很容易。如果您需要任何帮助，请告诉我。我会为你创造一个小小提琴。

为了完整起见，这是一个简单的小提琴：http://jsfiddle.net/trixta/sGNwC/

$('.require-if').each(function () {
    var $date = $('input[type="date"]', this);
    var $time = $('input[type="time"]', this);
    $date
        .on('change.requireif', function () {
            if($date.val()){
                $time.prop('required', true);
                if(!$time.prop('value')){
                    $time.prop('value', '00:00');
                }
            } else {
                $time.prop('required', false);
            }
        })
        .trigger('change.requireif')
    ;
});

对于min / max，我仍然使用依赖验证，对于所需的部分，我编写了上面的小脚本。

在一个元素上使用多个自定义验证约束？

1 个答案: