javascript - Using multiple custom validation constraints on the one element?

Question

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

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

I have two date elements and two time elements on my form. I want to be able to have date1 required if time1 is not empty, and the same for date2 and time2. I also want to have date2 >= date1 if date1 is not empty, and similarly date1 <= date2 if date2 is not empty.

Using the data-dependent-validation jsfiddle sample at http://afarkas.github.io/webshim/demos/demos/forms.html#Custom-validity I can see how to do both of those validation rules, but I can't see how to apply both at the same time. Is this possible?

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

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