https://app.wpml.org/assets/controllers/required_checkbox_controller-7c9bcb8f.js

1import { Controller } from "@hotwired/stimulus"
2
3// systemsdev-17229: THE REFUSAL A REQUIRED CHECKBOX SHOWS IS THE BROWSER'S, NOT THE PAGE'S.
4//
5// A `required` checkbox that is submitted unticked pops the browser's own sentence ("Please check
6// this box if you want to proceed"), written in the language the BROWSER is installed in. On a
7// German page read by somebody whose Chrome is English, that sentence is the one English thing on
8// the screen, and no catalog can reach it: the only way to choose those words is to hand the field
9// a message of its own through setCustomValidity.
10//
11// So the page does. The message arrives already translated, as a value on the field, and the
12// controller keeps it in step with the box: set while unticked, cleared the moment it is ticked,
13// because a custom message that is never cleared keeps the field invalid after the client has done
14// what was asked.
15export default class extends Controller {
16  static values = { message: String }
17
18  connect() {
19    this.sync()
20  }
21
22  // The box changed: either the client ticked it, which clears the refusal, or unticked it again.
23  sync() {
24    if (!this.hasMessageValue || this.messageValue === "") return
25    this.element.setCustomValidity(this.element.checked ? "" : this.messageValue)
26  }
27}