Incorrect client-side validation of checkbox

Hi,

Thank you for using our plugin and for your feedback.

1. We will update our plugin to work with the standard settings of WooCommerce and according to WooCommerce updates, don’t worry about that.

2. We cannot guarantee that our plugin can work/ be compatible with any plugins on the internet. If you experience any issue when using our plugin, please share the steps to reproduce the issue, I will forward it to the development team to consider fixing it in future updates.

3. It might be the theme issue. I do not see that when using the theme Twenty TwentyTwo.

However, you can use the filter hook cr_customer_consent_field to customize the consent checkbox on your site as well. If you are familiar with coding, please check the file wp-content/plugins/customer-reviews-woocommerce/includes/misc/class-cr-checkout.php lines 32-39.

Themes affect how it looks, so in TwentyTwo it’s red text instead of red border, which I guess was not intended too.

View post on imgur.com

To reproduce this, it’s enough to install and activate your plugin, enable the consent checkbox, and click it twice during checkout.

UPD: oh, it was in WC 6.0, after updating to 6.6 the styling of invalid inputs disappeared in this theme. But still reproducible in Storefront, the official WC theme.

• This reply was modified 2 years, 9 months ago by alexp11223.

Hi,

For the Storefront theme, you can add this custom CSS code to Appearance > Customize > Additional CSS, to remove the outline of the consent checkbox

body .form-row.woocommerce-invalid .cr-customer-consent-checkbox{
    outline: none;
}

Sure, but it’s still a bug in your plugin that you should fix. It makes no sense to mark this element as a required field. It is not a checkbox that supposed to be required like Terms of Service etc.

About the PayPal plugin mentioned above (the official WC plugin), to reproduce you can install 1.9.0 pre-release package, activate it in the settings with any PayPal sandbox or real account, enable the consent checkbox in your plugin, and then during checkout when clicking the PayPal button you will get an error about required fields not being filled if the consent checkbox is not checked.

Hi,

Here is the custom code to modify the consent checkbox with the filter cr_consent_checkbox

add_filter( 'cr_consent_checkbox', function( $output ) {
    $output = '<p class="form-row">'; //here
    $output .= '<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">';
    $output .= '<input type="checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox cr-customer-consent-checkbox" name="cr_customer_consent" id="cr_customer_consent" />';
    $output .= '<span class="woocommerce-terms-and-conditions-checkbox-text">' . get_option( 'ivole_customer_consent_text', true ) . '</span>';
    $output .= '</label>';
    $output .= '<input type="hidden" name="cr_customer_consent_field" value="1" />';
    $output .= '</p>';
    return $output;
} );

Hope that helps.

Yeah, it is possible to fix it via filter, but still it is a bug in your plugin, are you planning to fix it?

Most likely it is just an accidentally copied css class (e.g. from the ToS checkbox code) here, because as I explained earlier I don’t see any reason for this checkbox to have this validation class.

This issue has been addressed in the last updates of the plugin. Please install the latest version and let us know if you are still having any issues with the checkbox.