CS Form missing required input indicator

Support
#1

While CS forms are self handling the missing input at text fields (redish background) for required input fields on submit, it’s not showing any visual indicator for e.g. a field with radio options (and probably checkboxes). Did I miss an option to set this up?

Hand how the “is a required field” error message can be changed or edited for e.g. non English websites?

best regards
Mirco

#2

Hello Mirco,

Thanks for writing in!

There should be an indicator for Radio or Checkbox when it is required.

image
image729×567 22.5 KB

I believe that the translation for the phrase “is a required field” is a bug and may not be possible at the moment. I will report this to our developers and add it to our issue tracker.

Best Regards.

#4

Thanks @ruenel.

Sadly I do not see any indicator for the radio. For the text inout fields all looks great…but nothing at the radio options. If I fill in the missing text input and hit submit again it’s just scrolling / jumping to the radio to “notify” me that something is missing :slight_smile:

See below.

image
image2066×1006 164 KB

#5

By adding a little bit of JS to the page, I managed to translate the “is a required field” string on the fly. Maybe that’s a workaround for other users too. But it would be nice to have it as part of the cool CS Form element.

document.addEventListener('DOMContentLoaded', function () {
  function translateRequiredMessages(root) {
    root = root || document.body;
    var walker = document.createTreeWalker(
      root,
      NodeFilter.SHOW_TEXT
    );
    var node;
    while ((node = walker.nextNode())) {
      if (
        node.nodeValue &&
        node.nodeValue.includes('is a required field')
      ) {
        node.nodeValue = node.nodeValue.replace(
          /is a required field/g,
          'ist ein Pflichtfeld'
        );
      }
    }
  }
  translateRequiredMessages();
  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (node) {
        if (node.nodeType === Node.TEXT_NODE) {
          if (
            node.nodeValue &&
            node.nodeValue.includes('is a required field')
          ) {
            node.nodeValue = node.nodeValue.replace(
              /is a required field/g,
              'ist ein Pflichtfeld'
            );
          }
        } else if (node.nodeType === Node.ELEMENT_NODE) {
          translateRequiredMessages(node);
        }
      });
    });
  });
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
});
#6

Hey Mirco,

The Radio has “is a required field” text. The Radio Group, on the other hand, does NOT have it. This is a bug, and I have reported this already.

Cheers.

#8

Many thanks. I guess the best position for the radio group required field notification would be next to the label of the group.

For radio groups probably “Please chose an option” and for checkboxes “Please chose at least one option”… or so. :slight_smile:

#9

Anytime, Mirco.