https://elektrovorteil.de/assets/controllers/field_validation_cont…369cd5ab6511c6629348964cee499203d4df901e.js

1import { Controller } from "@hotwired/stimulus"
2
3// Soft validation. Errors appear only after the user has both modified the
4// field (`dirty`) and left it at least once (`touched`). Tabbing through an
5// empty required field without typing leaves it neutral. Once touched + dirty,
6// validation runs in real-time on each `input` so errors clear the moment the
7// user fixes them. Clearing a previously-valid field back to empty mid-edit
8// suppresses the error (treat as "starting over") — the next blur will
9// surface the "required" error if the user actually leaves it empty.
10export default class extends Controller {
11  static targets = ["input", "error"]
12
13  connect() {
14    this.dirty = false
15    this.touched = false
16  }
17
18  markTouched() {
19    this.touched = true
20    if (this.dirty) this.validate()
21  }
22
23  revalidate() {
24    this.dirty = true
25    if (!this.touched) return
26
27    if (this.inputTarget.value === "") {
28      this.element.removeAttribute("data-invalid")
29      if (this.hasErrorTarget) this.errorTarget.textContent = ""
30      return
31    }
32
33    this.validate()
34  }
35
36  validate() {
37    const invalid = !this.inputTarget.checkValidity()
38    this.element.toggleAttribute("data-invalid", invalid)
39    if (this.hasErrorTarget) {
40      this.errorTarget.textContent = invalid ? this.inputTarget.validationMessage : ""
41    }
42  }
43};