Question

我成功地复制了描述的解决方案 here 向CF7添加一个进度条。但是，我的联系表7不会验证必填字段，并且在单击“提交”按钮后不会显示任何响应消息。

我尝试将3.5.3版中的scripts.js（contact-form-7 / includes / js / scripts.js）中的代码改编为更新的5.1版

这是更改后的scripts.js：

cik.csv

progessbar效果很好，已发送邮件，但是如果上传达到100％，则ajax-loader仍然处于旋转状态，并且不会显示成功消息。

有人可以帮忙吗？

Answer 1

是的，这是一堵代码墙。为此事道歉。我成功完成了带有workig进度过程的进度框。请参见下面的代码。现在的问题是，在验证必填字段之前触发了上传过程。在上传开始之前，我该怎么做才能验证必填字段？有什么建议吗？

$.ajax( {
            type: 'POST',
            url: wpcf7.apiSettings.getRoute(
                '/contact-forms/' + wpcf7.getId( $form ) + '/feedback' ),
            data: formData,
            dataType: 'json',
            processData: false,
            contentType: false,


            // add progress box        
            beforeSend: function() { 
            progressbox.slideDown(); //show progressbar
            progressbar.width(completed); //initial value 0% of progressbar
            statustxt.html(completed); //set status text
            statustxt.css('color','#000'); //initial color of status text
            //e.preventDefault();
            },
            //end 

            // show upload process   
            xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(event) {
            if (event.lengthComputable) {
                var percentComplete = Math.round((event.loaded * 100) / event.total);
                //upload progress
                progressbar.width(percentComplete + '%') //update progressbar percent complete
                statustxt.html(percentComplete + '%'); //update status text  
                if(percentComplete>50) {
                    statustxt.css('color','#fff'); //change status text to white after 50% 
                }
            }
       }, false);



       return xhr;
    },
            //end           

        } ).done( function( data, status, xhr ) {
            ajaxSuccess( data, status, xhr, $form );
            $( '.ajax-loader', $form ).removeClass( 'is-active' );

            // hide progressbox
            myform.resetForm();  // reset form
            submitbutton.removeAttr('disabled'); //enable submit button
            progressbox.slideUp(); // hide progressbar
            //end 
        } ).fail( function( xhr, status, error ) {
            var $e = $( '<div class="ajax-error"></div>' ).text( error.message );
            $form.after( $e );
        } );
    };

在联系表单7中上传进度栏

1 个答案: