flatpickr 字段不显示表单验证消息？

Question

我正在 WordPress 主题中构建自定义联系表单。我一直在尝试显示 Flatpickr 日期字段的验证错误消息，但它不起作用。我什至尝试过

form.find('input[type=hidden]').val()

来获取该值，但它仍然不起作用。

日期选择器字段值已提交到数据库，仅不显示验证错误。

因为我是jquery新手，所以期望更简单的解决方案。

提前致谢。

这是我的代码

jQuery(document).ready(function ($) {


    // Date picker
    $("#date").flatpickr({
        altInput: true,
        altFormat: "F j, Y",
        dateFormat: "Y-m-d",
        minDate: "today",
        maxDate: new Date().fp_incr(30), // 14 days from now
        "disable": [
            function(date) {
                // return true to disable
                return (date.getDay() === 0 || date.getDay() === 6);
    
            }
        ],
        "locale": {
            "firstDayOfWeek": 1 // start week on Monday
        }
    });
    
    /* contact form submission */
    $('#someForm').on('submit', function (e) {

        e.preventDefault();

        $('.was-validated').removeClass('.was-validated');

        var form = $(this),
            name = form.find('#name').val(),
            email = form.find('#email').val(),
            service = form.find('#service').val(),
            date = form.find('input[type=hidden]').val(),
            message = form.find('#message').val(),
            ajaxurl = form.data('url');


        if (name === '') {
            $('#name').parent('.col-lg-2').addClass('was-validated');
            return;
        }

        if( email === '' ){
            $('#email').parent('.col-lg-2').addClass('was-validated');
            return;
        }
        
        if( service === '' ){
            $('#service').parent('.col-lg-2').addClass('was-validated');
            return;
        }
        
        // This bit of code is not working.
        if( date === '' ){
            $('#date').parent('.col-lg-2').addClass('was-validated');
            return;
        }

        $('#submitButton').html('Processing...');

        form.find('input, button, textarea, select').attr('disabled','disabled');

        $.ajax({
            
            url : ajaxurl,
            type : 'post',
            data : {
                
                name : name,
                email : email,
                service: service,
                aptDate: aptDate,
                message : message,
                action: 'save_user_contact_form'
                
            },
            error : function( response ){
                $('#formErrorMessage').modal('show');
                $('#submitButton').html('Submit');
                form.find('input, button, textarea, select').removeAttr('disabled');
            },
            success : function( response ){
                if( response == 0 ){
                    
                    setTimeout(function(){
                        $('#formErrorMessage').modal('show');
                        $('#submitButton').html('Submit');
                        form.find('input, button, textarea, select').removeAttr('disabled');
                    },1500);

                } else {
                    
                    setTimeout(function(){
                        $('#formSuccessMessage').modal('show');
                        $('.col-lg-2').removeClass('was-validated');
                        $('#submitButton').html('Submit');
                        form.find('input, button, textarea, select').removeAttr('disabled').val('');
                    },1500);

                }
            }
            
        });

    });

});

Answer 1

终于，我成功了。我试图在 Google 上找到问题的答案，幸运的是我找到了 Victor Leong 的这篇文章。虽然他的解决方案基于日历状态 onOpen 和 onClose，但我们也可以将其用于 onReady。

将以下代码添加到 flatpickr 选项

        allowInput: true,
        onReady: function(selectedDates, dateStr, instance) {
            $(instance.altInput).prop('readonly', false);
        },

这段代码将从输入字段中删除

readonly

属性。请查看Victor的文章了解更多信息。他解释得很好。

这是我完整的工作代码

jQuery(document).ready(function ($) {

    // Date picker
    $("#aptdate").flatpickr({
        allowInput: true,
        altInput: true,
        altFormat: "F j, Y",
        dateFormat: "d-m-Y",
        minDate: "today",
        maxDate: new Date().fp_incr(30), // 30 days from now
        "disable": [
            function(date) {
                // return true to disable dates based on days
                return (date.getDay() === 0 || date.getDay() === 6);
            }
        ],
        "locale": {
            "firstDayOfWeek": 1 // start week on Monday
        },

        // Remove readonly attribute from the date input field
        onReady: function(selectedDates, dateStr, instance) {
            $(instance.altInput).prop('readonly', false);
        },

    });
    
    /* contact form submission */
    $('#someForm').on('submit', function (e) {

        e.preventDefault();

        $('.was-validated').removeClass('.was-validated');

        var form = $(this),
            name = form.find('#name').val(),
            email = form.find('#email').val(),
            service = form.find('#service').val(),
            aptDate = form.find('#aptdate').val(),
            message = form.find('#message').val(),
            ajaxurl = form.data('url');

        if (name === '') {
            $('#name').parent('.col-lg-2').addClass('was-validated');
            return;
        }

        if( email === '' ){
            $('#email').parent('.col-lg-2').addClass('was-validated');
            return;
        }
        
        if( service === '' ){
            $('#service').parent('.col-lg-2').addClass('was-validated');
            return;
        }

        if ( aptDate === '' ) {
            $('#aptdate').parent('.col-lg-2').addClass('was-validated');
            return;
        }

        $('#submitButton').html('Processing...');

        form.find('input, button, textarea, select').attr('disabled','disabled');

        $.ajax({
            
            url : ajaxurl,
            type : 'post',
            data : {
                
                name : name,
                email : email,
                service: service,
                aptDate: aptDate,
                message : message,
                action: 'save_user_contact_form'
                
            },
            error : function( response ){
                $('#formErrorMessage').modal('show');
                $('#submitButton').html('Submit');
                form.find('input, button, textarea, select').removeAttr('disabled');
            },
            success : function( response ){
                if( response == 0 ){
                    
                    setTimeout(function(){
                        $('#formErrorMessage').modal('show');
                        $('#submitButton').html('Submit');
                        form.find('input, button, textarea, select').removeAttr('disabled');
                    },1500);

                } else {
                    
                    setTimeout(function(){
                        $('#formSuccessMessage').modal('show');
                        $('.col-lg-2').removeClass('was-validated');
                        $('#submitButton').html('Submit');
                        form.find('input, button, textarea, select').removeAttr('disabled').val('');
                    },1500);

                }
            }
            
        });

    });

});

如果有更好的解决方案，请告诉我。

Answer 2

您需要编辑日期的下一个元素，因为

flatpckr

会生成新元素来保存该值。

const date= $('#date');

if (date.attr("class").includes("is-invalid")) {
  date.next().removeClass("is-invalid");
  date.next().addClass("is-invalid");
} else {
  date.next().removeClass("is-invalid");
}