Live Validation in Checkbox does not show Validation Message

[Martin]

Hi,
I try to create a consistent experience in a form.

Have multi-steps with checkbox and radio in it.
with checkbox there is NO Validation-Message shown like in the radios.

With same Settings
General :

• required: true
• required count: 2

VALIDATION:

• Live Validation: true
• Show Validation Message: true

When the validation «required» is NOT fulfilled, In Radio-Wrapper there is added the class «brf-invalid» to the brxe-brf-pro-forms-field-radio-wrapper and also a brf-validation-message attached.

BUT in the the checkbox-wrapper also validation «required» is NOT fulfilled there is NO class «brf-invalid» and NO brf-validation-message attached.

The attribute «data-validation» has the same value (expect the different message).

There is only the “browser-default-information”:
«Klicke dieses Kästchen an, wenn du fortfahren möchtest.»

I would like to create a consistent User-experience and for this, I would like to have also in checkbox Validation-fail the red-border and the Message set in VALIDATION > Validation Rules > Required > Validation Message.

Questions:

• How does I have to use the Validation > Required for chebox-wrapper so the Validation Message will shown instead of the default Browser-info?

• Is this a bug?

Have tried different approaches and searched in documentation, forum and google, but can not figure out, what could be the problem.

Sugestion:

• Is there maybe missing a preventDefault(); in the code for «Next Step»- «Previous Step»-Elements, if for radio there is set a Validation “required”, with Live-Validation and Validation Message?

If this should be not a bug and it would generally not possible, a note in the documentation would helpfull.

---

---

NOT Working within Checkbox-Wrapper and the same settings

Red Border and Message ARE MISSING - also in the Dev-Tools are those classes and the element not existing.

WORKING Working within Radio-Wrapper and the same settings

Red Border and Message ARE SHOWN!

[razin]

Same problem.. great support..

[MRKNStudio]

JS-Workaround (adjust to your custom-id of the checkbox wrapper element)

<script>
(function () {
  const CUSTOM_MESSAGE = "Bitte akzeptieren Sie die Datenschutzerklärung.";

  function patchValidationMessage(el) {
    const raw = el.getAttribute("data-validation");
    if (!raw) return;
    try {
      const rules = JSON.parse(raw);
      rules.forEach((rule) => { rule.message = CUSTOM_MESSAGE; });
      el.setAttribute("data-validation", JSON.stringify(rules));
    } catch (e) {
      console.warn("Could not parse data-validation on", el, e);
    }
  }

  const wrapper = document.querySelector('[data-custom-id="datenschutz"]');
  const input = document.querySelector('input[name="form-field-datenschutz[]"]');

  if (wrapper) patchValidationMessage(wrapper);
  if (input) patchValidationMessage(input);

  // Watch for validation messages and inject custom text
  if (wrapper && input) {
    const observer = new MutationObserver(() => {
      const msgDivs = wrapper.querySelectorAll(".brf-validation-message");
      msgDivs.forEach((div) => {
        const isInvalid = input.getAttribute("aria-invalid") === "true";
        if (isInvalid && div.textContent.trim() !== CUSTOM_MESSAGE) {
          div.textContent = CUSTOM_MESSAGE;
        }
      });
    });

    observer.observe(wrapper, { subtree: true, childList: true, characterData: true });
  }
})();
</script>