[feature suggestion] Handle hidden form inputs with `required` attribute

This is just a suggestion for a useful feature, it's not a "ticket" or official request per se, just thought it would be useful to include in the library! I don't use the library itself, but I have referenced it a lot for some starting code.

A common use-case for a reveal/toggle/visibility controller like this is a form that asks additional questions based on user input, typically along the lines of yes/no questions with follow-up questions. If you just hide the parent items and submit the form, it will still try and validate any input items that have the HTML required attribute. A solution is to track the inputs that are required when the Stimulus controller connects and then add/remove the required attribute when shown/hidden.

This is an example Stimulus controller from one of my projects that handles this. It's not the same as the reveal controller, but is close enough to extract the useful bits of code. Note that I only have 1 "content" target, but it could easily be updated to handle multiple targets.

// Show or hide content based on the state of a radio button.
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "show", "hide", "content" ]

  connect() {
    this.requiredFields = this.getRequiredFields()

    if (this.showTarget.checked) {
      this.show()
    } else {
      this.hide()
    }
  }

  show(_event) {
    this.contentTarget.style.display = "block"
    this.requiredFields.forEach((requiredField) => {
      requiredField.required = true
    })
  }

  hide(_event) {
    this.contentTarget.style.display = "none"
    this.requiredFields.forEach((requiredField) => {
      requiredField.required = false
    })
  }

  // Forms will still validate the required fields even if they are hidden.
  // Solution is to remove the [required] attribute from the fields when hidden.
  getRequiredFields() {
    return this.contentTarget.querySelectorAll("[required]")
  }
}

stimulus-components / stimulus-reveal-controller

[feature suggestion] Handle hidden form inputs with `required` attribute #13