frontend click on a [checkbox …] field triggers validation

Where can we see the website in question?

Like described, I spinned up a local environment to verify that it even happens with a fresh install of wordpress with only Contact Form 7 on it. I used the standard form which gets created after a fresh plugin install and just added the following field to field configuration:

[checkbox checkbox-689 use_label_element “test1”]

So there cannot be any side effects with other plugins or the used theme.

This live link will be available only today, since its hosted locally:

Open Live Link:
https://possible-letter.localsite.io

If prompted, enter the information below.

Username: suggestion
Password: snarky

An update from my side. The idea with the local server wasnt so great. Therefore I created a fresh hosted server. Its running 24/7 and will be deleted, when we were able to sort this out ??

https://cf7temp.de-fra1.cloudjiffy.net/

I checked the cf7temp.de-fra1.cloudjiffy.net site. Seemingly there is no problem with the form. The checkbox is working as expected.

Good morning ??

When I understand it right, every validated field (I just realized that the E-Mail Field does the same) triggers validation for all fields above. I changed the example on the website a litte bit, to get a better understanding.

When I now click checkboxes in the first fields block, none of the fields below show the error notice. When I click checkboxes of the last fields block, every field above gets validated directly.

So this is a new behaviour since v5.6; before this versions, the validation started when a contact form was going to be submitted.

After understanding the behavior better, I must admit, that it has some advantages. Users filling out a contact form will be forced to fill everything out from top to bottom, instead of jumping around in the fields.

Its just that we need to change some contact forms, because we autofill checkboxed via Javascript, which are at the bottom of the form.

This is a tip not documented yet, form fields under an element that has the novalidate class are excluded from the client-side validation targets.

<p class="novalidate">
  [checkbox* your-country "China" "India" "San Marino"]
</p>

In this example, the checkboxes will be validated only when you submit the form.

Takayuki, this also works with <div>s ?? thank you very much. This is exactly what we need ?? Thank you for all your replies and have a very good day ?? Thank you for all the work with contact form 7.