Сделать ввод flatpickr обязательным

Я использую замечательный flatpickr в проекте и мне нужно, чтобы календарная дата была обязательной.

Я пытаюсь провести всю проверку в собственном HTML, поэтому я наивно пытался просто добавить атрибут required к входному тегу, но, похоже, это не работает.

Есть ли способ изначально сделать дату обязательной с помощью flatpickr или мне нужно написать какие-то пользовательские проверки?


datetimepicker datetime flatpickr
person stassinari    schedule 19.07.2017    source источник

Ответы (5)


arrow_upward
2
arrow_downward

скопируйте имя атрибута из предыдущего типа ввода, скрытого в визуализированный ввод flatpickr, просто сделайте это

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

arrow_upward
1
arrow_downward

Работаю над этим уже пару дней, наконец-то получил результат, к которому стремился.

ПРИМЕЧАНИЕ. Я использую 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);
person muz the axe    schedule 23.05.2019

arrow_upward
0
arrow_downward

Немного покопавшись в репозитории GitHub, я нашел закрытую проблему, в которой указано, что вопрос не будет решаться.

На той же странице проблемы есть обходной путь, который, похоже, помогает:

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

arrow_upward
0
arrow_downward

Если кому-то это поможет, я использую parsley.js для проверки внешнего интерфейса, и это работает хорошо. с flatpickr

введите здесь описание изображения

person Mariela Gonzalez    schedule 26.02.2020

arrow_upward
0
arrow_downward

Просто чтобы немного больше рассказать об этом, я обнаружил, что значение игнорирования, установленное как пустой массив, также помогло мне. Вы можете просто добавить это к обратному вызову проверки. Кроме того, отображение было проблемой, поэтому я обновил 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
    }
});
person david    schedule 26.03.2021