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

Posted 2023-05-09

【中文标题】flatpickr 字段不显示表单验证消息？

【英文标题】：Form validation message is not displayed for flatpickr field?

【发布时间】：2020-11-16 22:37:29

【问题描述】：

我正在 WordPress 主题中构建自定义联系表单。我一直在尝试显示 Flatpickr 日期字段的验证错误消息，但它不起作用。我什至尝试过form.find('input[type=hidden]').val() 来获取价值，但它仍然无法正常工作。

Datepicker 字段值被提交到数据库，只有验证错误不显示。

由于我是 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);

                
            
            
        );

    );

);

【参考方案1】：

最后，我得到了它的工作。我试图在谷歌上找到我的问题的答案，幸运的是我找到了 Victor Leong 的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);

                
            
            
        );

    );

);

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