https://saii.kr/assets/controllers/display_name_form_controller-d665ed80.js

1import { Controller } from "@hotwired/stimulus"
2
3// The rename is irreversible, so the submit button stays disabled until the
4// member has actually typed a different, plausible name. Server-side validation
5// still owns the rules -- this only keeps the obvious no-ops unclickable.
6export default class extends Controller {
7  static targets = ["input", "submit"]
8  static values = { current: String, minLength: Number, maxLength: Number }
9
10  connect() {
11    this.validate()
12  }
13
14  validate() {
15    const value = this.inputTarget.value.trim().replace(/\s+/g, " ")
16    const longEnough = value.length >= this.minLengthValue
17    const shortEnough = value.length <= this.maxLengthValue
18    const different = value !== this.currentValue
19
20    this.submitTarget.disabled = !(longEnough && shortEnough && different)
21  }
22}