search

felixarntz / bootstrap-for-contact-form-7

This plugin modifies the output of the popular Contact Form 7 plugin to be styled in compliance with themes using the Bootstrap CSS framework.
https://wordpress.org/plugins/bootstrap-for-contact-form-7/
GNU General Public License v2.0
24 stars 18 forks source link

acceptance failing validation doesn't show the proper message #58

Closed mario-tux closed 6 years ago

mario-tux commented 6 years ago

After the upgrade to the CF7 5.0.1 and to the latest BfCF7 version there is a problem in the visualization of validation-failing elements. When the validation on an element fails, the element usually get a red border and a message like The field is required appears. It works for me for all the elements type except for the acceptance box (a mandatory privacy policy for me). The user can't submit the form if the mandatory acceptance is not checked (as expected) but if the check is missing I get only a general error like One or more fields have an error. Please check and try again.. The acceptance box should become red and a message like You must accept the terms and conditions before sending your message. is supposed to appear near the control. It worked well using pre-5.0.0 versions of CF7 jointly with BfCF7.

To reproduce the problem: goes on https://lod2018.icas.xyz/registration/ and just click on the Register & Pay button.

gidomanders commented 6 years ago

If the acceptance checkbox is not checked, the send button should be disabled. This doesn't work on your website. Could you please share your contact form so I can try to replicate the issue?

mario-tux commented 6 years ago

@gidomanders The send button is enabled even without check on the acceptance because javascript-support in CF7 is disabled in my form: instead of the ajax-based method to validate and send the data, the classic POST-based one is used. Such mode is supported by CF7. It is the case with some CF-related plugins that need to elaborate on server-side the submitted data. In my case, I wrote a plugin to support the conference registration/payment. I had to disable js support using the WPCF7_LOAD_JS symbol (as described in https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/). Please note, that in this mode of use the working validation messages are embedded in the POST-reply (old fashion forms). The only missing validation error is the one related to the acceptance control. It works well without BfCF7. It is also a regression with respect to the previous behavior.

In order to reproduce the problem should be enough to use define('WPCF7_LOAD_JS', false); in wp-config.php or functions.php. Otherwise I can manage to arrange a public minimal-installation with such behavior. The installation reported in my report is a production server so I can't change anything there.

gidomanders commented 6 years ago

The reason there is no validation message, is because Contact Form 7 expects you to use JavaScript. Since you're forcing it not to, you have to make the acceptance box validate when validating instead of after validation. You can find a longer description here.

Conclusion, you have to add acceptance_as_validation: on to your contact form in the Additional Settings tab.

mario-tux commented 6 years ago

The acceptance_as_validation: on is already active in my website so I created a test installation for you. I discovered that the problem is still there even with javascript enabled: the bug is in the acceptance notification message (with or without JS).

These are the settings of the contact form: Form:

[text* your-name] Name [/text*]
[email* your-email] E-mail [/email*]
[acceptance accept] policy acceptance? [/acceptance]
[submit "Send"]

Additional settings:

acceptance_as_validation: on
demo_mode: on

First installation: http://test.m-space.ovh/without/ Second installation: http://test.m-space.ovh/with/

I installed just one of the bootstrap themes I use, CF7 and BfCF7 (enabled only in the second installation).

gidomanders commented 6 years ago

We use the wpcf7_get_validation_error() function to determine if the acceptance box is valid or not, same as CF7 does itself.

I can not replicate your issue on my setup. Could you please share more information about your setup so I can try to replicate it?

mario-tux commented 6 years ago

The only missing detail is that this is a network installation (see https://codex.wordpress.org/Create_A_Network): 'wihout' and 'with' are two sub-sites of the main installation. The site reported in the opening post is on a network too. Is this the problem? For the rest is a fresh installation with just these two plugins (in one sub-site, BfCF7 is not enabled).

mario-tux commented 6 years ago

@gidomanders have you been able to replicate the problem? Just to known.

gidomanders commented 6 years ago

Not yet, but I'll be working on this again tomorrow.

gidomanders commented 6 years ago

I found out the validation requires the form-group to have the field name as class. This was not the case, so I updated it. Hopefully @felixarntz will have some time soon to publish the updates!

mario-tux commented 6 years ago

I confirm that the fix works in my test environment. Thanks.

mspiderv commented 2 years ago

@gidomanders @mario-tux Can you please explain your solution more detailed. I don't understand. What does it mean "I found out the validation requires the form-group to have the field name as class.". Can you please show your code?