Check compatibility with Jquery Validation For Contact Form 7 Pro

[Splash-IT]

Hello, they don’t display error messages from the PlugIn Jquery Validation For Contact Form 7 at MultiFormSteps in the fields .. Only at the last step. At normal CF7 Form there is no problem .

[dnesscarkey]

Hi,

For Contact From 7, we listen to the submit trigger and check the validate fields. If there are any validation issue, we push the error message and block the Contact Form 7 from submitting the form. However for multi step contact-form-7-conditional-fields we are unable to block the ajax call send by the plugin when next step button is clicked. Is there any way we can block this ?

Thanks

[pwkip]

there are some events you can listen to, like wpcf7cf_change_step. But I don't think that will work. Would it help if I add a wpcf7cf_before_submit_step?

Here's an example of how to use the currently available events: https://conditional-fields-cf7.bdwm.be/javascript-events-example/

[dnesscarkey]

For contact form 7 we have stop form submission when there is here. Code goes like this.

jQuery('.wpcf7-form-control.wpcf7-submit').click(function(e){ 
    $jvcfValidation     =   jQuery(this).parents('form');
    if (!jQuery($jvcfValidation).valid()){
        //STOP AJAX CALL HERE
    }
});

However, same code is not working for multi step contact-form-7-conditional-fields

jQuery('.wpcf7cf_next-container .wpcf7cf_next').click(function(e){ 
    $jvcfValidation     =   jQuery(this).parents('form');
    if (!jQuery($jvcfValidation).valid()){
        //STOP AJAX CALL HERE
    }
});

Any thoughts ?

[Splash-IT]

...please let me know if it works and you need some support. hopefully

[pwkip]

The problem is that my on click event listener is probably registered before yours. I also use a namespace, so the actual click event is 'click.wpcf7cf_step'

Here's the code:

    multistep.$btn_next.on('click.wpcf7cf_step', async function() {

        var result = await multistep.validateStep(multistep.currentStep);
        if (result === 'success') {
            multistep.moveToStep(multistep.currentStep+1); 
        }

    });

validateStep() will return a promise, doing some custom validation trough AJAX action=wpcf7cf_validate_step. So you could also maybe hook into the ajax call via PHP?

Some relevant parts of the validateStep function: (I removed some code to improve readability)

Wpcf7cfMultistep.prototype.validateStep = function(step_index) {

    // ... removed some code here

    return new Promise(resolve => {
        var fd = new FormData();

        // ... here I add the relevant form fields to the FormData object

        jQuery.ajax({
            url: wpcf7cf_global_settings.ajaxurl + '?action=wpcf7cf_validate_step',
            type: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            dataType: 'json',
        }).done(function(json) {            
            if (!json.success) {

                // ... here I do some DOM manipulation to show/hide relevant error message.

            } else if (json.success) {

                resolve('success');
                return false;

            }
        }).fail(function() {
            resolve('error');
        }).always(function() {
            // do nothing
        });
    });

};

If you want and if you have a bitbucket account I can give you read permissions on my CF Pro repo so you could fiddle around and maybe create a PR that would work for you?

[dnesscarkey]

Hi,

None of the suggestions worked for us. Can you please give me access to your plugin files ? My bitbucket email is dnesscarkey@gmail.com

Thanks

[pwkip]

@dnesscarkey I have given you read access to the repo: https://bitbucket.org/bdwm/wpcf7cfpro/

[dnesscarkey]

Thanks @pwkip . I am going through it.

[dnesscarkey]

Hi @pwkip ,

I tried these but no success. Hope you can help me here.

First i unbind your namespace. jQuery(".wpcf7cf_next").off('click.wpcf7cf_step');

And then did our validation part. So if the validation is valid, then i want to add the namespace and trigger it. But i am unable to bind the namespace.

jQuery(this).on('click.wpcf7cf_step');
jQuery(this).trigger('click.wpcf7cf_step');

Thanks

[Splash-IT]

Hello, thanks a lot for your fast and perfect work ;o) I hope the update brings the mobile users back to fill the form correctly and full. If you need some one...please let me know. Thanks

[dnesscarkey]

@Splash-IT It is not done yet. So i am asking help from @pwkip

Thanks

[pwkip]

Hey, I'll try to look into it after the weekend

[Splash-IT]

@pwkip Hello Jules, is there a solution about it? Thanks a lot Tilo

[Splash-IT]

Hello, is there a time for a update with multi? @dnesscarkey has update to version 4.5, but without a solution with multistep Do you need someone? Thanks a lot Tilo

[pwkip]

I'll do some testing. But I'm not too excited about changing my code. The way I see it validation is working fine for multistep forms without any additional validation. I will play around with the jQuery validation plugin until I am convinced that it makes sense to use it for multistep.

@dnesscarkey does your plugin provide a way to disable jquery validation on a per-form basis?

[Splash-IT]

@pwkip Hello Jules, i like to believe you. I mean that Dinesh must correct his code, that it work with multistep correctly. @pwkip @dnesscarkey if you need some money for speedup the solution at multistep, let me know (how much and how). Thanks a lot Tilo

[pwkip]

I'm working on a performance update at the moment. I had a chance to test the jQuery validation plugin, and I must say I really like the idea. At first I thought this plugin was sending constant ajax request to validate the form as you type, but as it's more a convenient abstraction layer on top of the regular validation I can see it's usefulness. I'll make sure to look into how we can make the integration happen. But meanwhile I'm cleaning up a lot of my own mess as well. Money is not necessary, I just need to take my time for this.

[Splash-IT]

@pwkip

Hello Jules...jes that's it...it is absolutely useful...especially for complex forms. https://dnesscarkey.com/jquery-validation/pro-version-demo/ The user experience is better than standard CF7. With this PlugIn from Dinesh and a little CSS Code correctness (red/green color) it is perfect ;o) You can test itself https://experten-kredite.de/kontakt/ Please let me know if you need someone (cash ore someone).

Thanks for your good job Tilo

[Splash-IT]

@pwkip Hello Jules, i have found a other Multistep CF7 Solution https://codecanyon.net/item/contact-form-7-multistep-pro/19635969?ref=rednumber It works perfect with Jquery Validation For Contact Form 7 Pro, see here: https://experten-kredite.de/kreditanfrageformular/ Thanks for your good job Tilo

[pwkip]

Hi Tilo,

Thanks for this. I will look into how this plugin is handling the problem and try to apply their solution too. I assume you are happy with the current solution. Or do you want me to notify you if and when the problem with conditional fields compatibility is solved?

[Splash-IT]

Hi Jules,

yes, i want information from you, if you have solved the issue. I want a solution from your PlugIn. If you want you can take a look to this plugin. It's really fantastic (some different Themes, CSS and Code).

Greets Tilo

[Splash-IT]

Hi Jules,

I hope you are well...!

I have trouble with the support of Contact Form Seven 7 Multi-Step Pro (Add-on For CF7) [https://codecanyon.net/item/contact-form-7-multistep-pro/19635969]. They are not working. https://wordpress.org/support/topic/dont-show-upload-box/#post-13269968 So i hope you are ready for the next level of your Multistep Pro Version ;o)

Thanks a lot Tilo

[Splash-IT]

look and feels like

• Contact Form 7 Multi-Step

• Contact Form 7 Multi-Step Pro

Both are work with with Jquery Validation For Contact Form 7 Pro. If your Plugin also work fine...thats all i need.