Question

我在项目中使用了惊人的flatpickr，并且需要日历日期是强制性的。

我试图在原生HTML中进行所有验证，所以我只是在尝试将required属性添加到输入标记，但这看起来并不起作用。

有没有一种方法可以使用flatpickr本地强制使用日期，还是需要编写一些自定义支票？

Answer 1

在向GitHub仓库挖掘了一下之后，我发现closed issue指出该问题无法解决。

在同一个“问题”页面中，有一种似乎可以解决问题的解决方法：

$('.flatpickr-input:visible').on('focus', function () {
    $(this).blur()
})
$('.flatpickr-input:visible').prop('readonly', false)

Answer 2

将先前输入类型的attr名称复制隐藏到呈现的flatpickr输入中只是这样做

$('[name=date_open]').next('input').attr("name","date_open");
$('[name=date_close]').next('input').attr("name","date_close");

Answer 3

已经研究了几天，终于得到了我想要的结果。

注意：我正在使用Flatpickr和jQuery验证

您会知道flatpickr使用替代字段输入日期，隐藏了存储日期的实际字段，这是关键。

jQuery验证具有一组默认值，默认情况下，隐藏字段不受验证，这通常很合理。因此，我们只需要打开隐藏字段的验证即可。

    $.validator.setDefaults({
        ignore: []
    });

那么我的验证器规则就很正常了：

    var valid = {
                rules: { dateyearlevel: {required: true} },
                messages: { dateyearlevel: {required: "The date is required"} }
    };
    $("#myform").validate(valid);

那应该可以确保您输入日期。在我的情况下，我希望只需要选择日期，即选中了一个复选框。为此，我们更改了上面的规则：

    var valid = {
                rules: { dateyearlevel: {
                  required: function() { return $("#mycheckbox").is(":checked") } 
                } },
                messages: { dateyearlevel: {required: "The date is required"} }
    };
    $("#myform").validate(valid);

Answer 4

如果这对某人有帮助，我正在使用parsley.js进行前端验证，并且可以与flatpickr配合使用

enter image description here

Answer 5

只是为了对此进行更多扩展，我发现设置为空数组的忽略值也对我有用。您可以将其添加到验证回调中。显示也有点问题，所以我更新了 errorPlacement 以允许像这样的 flatpickr 输入。

$('#my-form').validate({
    errorPlacement: function (error, element) {
        if (element.hasClass('js-flatpickr') && element.next('.js-flatpickr').length) {
            error.insertAfter(element.next('.js-flatpickr'));
        } else if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
           error.insertAfter(element);
        }
    },
    ignore: [],
    rules: {
        'startdate': { required: true }
    },
    messages: {
        'startdate': {required: "Start Date is required"}
    },
    submitHandler: function(form) {
        // ajax form post
    }
});

需要进行flatpickr输入

5 个答案: