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

我的表单上有两个日期元素和两个时间元素。如果

time1

不为空，我希望能够要求

date1

，对于

date2

和

time2

也是如此。如果

date1

不是空的，我还想让

date2>=date1

，同样的

date1目前也不可能。但是DOM脚本编写应该很容易有条件地设置required属性并更改min/max属性。如果你需要帮助，请告诉我。我会为你做一把小小提琴

为了完整起见，这里有一把简单的小提琴：

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

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

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

$('.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')
    ;
});