Sometimes you need to change the surroundings of an invalid element. You can use the invalid and valid (which is non-standard) events to hook into the appropriate time.

Note, that the events will fire at different times. While invalid is triggered only on form submission, valid is triggered immediately when the input becomes valid. You can change this behavior with the revalidate setting.

The background will turn light-red, if the containing input is invalid:

<form>
  <p class="wrapper">
    The background will turn light-red, if the containing input is invalid:<br>
    <input id="foo" name="foo" required>
  </p>
  <p>
    <button>go</button>
  </p>
</form>

<style>
.wrapper {
  background: lightgreen;
}
.wrapper.my-invalid-class {
  background: pink;
}
</style>

<script>
var myInput = document.getElementById('foo');
myInput.addEventListener('invalid', function() {
  myInput.closest('.wrapper').classList.add('my-invalid-class');
});
myInput.addEventListener('valid', function() {
  myInput.closest('.wrapper').classList.remove('my-invalid-class');
});
hyperform(window);
</script>