How to move validation classes from input element to parent

[danbramall]

How to move validation classes from input element to parent

[Boldewyn]

Hi,

you have several options here. One way is to listen to valid and invalid events:

myInput.addEventListener('invalid', function() {
  myInput.closest('.wrapper').classList.add('my-invalid-class');
});
myInput.addEventListener('valid', function() {
  myInput.closest('.wrapper').classList.remove('my-invalid-class');
});

Another, slightly more complicated method, but with more “artistic freedom” is to overwrite the rendering functions, that attach and detach the error messages, like, e.g. in this example:

hyperform.setRenderer('attachWarning', function(warning, element) {
  element.closest('.wrapper').classList.add('my-invalid-class');
  // the original code, copied:
  element.parentNode.insertBefore(warning, element.nextSibling);
});

hyperform.setRenderer('detachWarning', function(warning, element) {
  element.closest('.wrapper').classList.remove('my-invalid-class');
  // original code again:
  if (warning.parentNode) {
    warning.parentNode.removeChild(warning);
  }
});

In both cases you can also simply copy the class, since it’s already updated at that time:

element.closest('.wrapper').className = element.className;

I hope that helps.

[danbramall]

Thanks Boldewyn, much appreciated.

[Boldewyn]

I’ve documented the first solution on https://hyperform.js.org/examples.html#file=manipulate_wrapper now.