jquery flatpickr字段未显示表单验证消息?

xxslljrj  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(151)

我正在构建一个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);

                }
            }
            
        });

    });

});

字符串

tpxzln5u

tpxzln5u1#

最后,我让它工作了。我试图在谷歌上找到我的问题的答案,幸运的是我达到了this post由维克托梁。虽然他的解决方案是基于onOpen和onClose的日历状态,但我们也可以将其用于onReady。
将下面的代码添加到flatpickr选项

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

字符串
这段代码将从输入字段中删除readonly属性。请查看Victor's article了解更多信息。他解释得很好。

这是我完整的工作代码

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

                }
            }
            
        });

    });

});


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

qacovj5a

qacovj5a2#

你需要编辑日期的下一个元素,因为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");
}

字符串

相关问题