phlex-forms 0.4.0 → 0.4.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 26a87406065dfe0b6d5b023949661d89548c3ad6379af9d0e4d74c4162f49070
-  data.tar.gz: b36430b1faf88ad5095a358709bce31a72869c40619dc527bc3e04be10450c0f
+  metadata.gz: c9b781532660ae609037596969274d95acbb9eac449c60475c51a91329a9fcb5
+  data.tar.gz: e242d6ecb20a6eb2238b5a2dfb1bb86bd68ad5f2b7a783bdb9b23e2d6cc1c42c
 SHA512:
-  metadata.gz: f9e5a95dfea504c6b487c23a0b5683a4a68391b4e07ff33192b548a40a5b7eff3a0562e0af1097a20bbeca3762017254fe626fb1fe7079408996815f8b1d7a71
-  data.tar.gz: 1ae2b903bfe9057f1705b3d3a6e788c16acf1c4d837c0bdbd723434aca71c45432d194ebf638ce17c14d597826751a6c4bb124e92f02e7b3d01fdf29ac6bbf34
+  metadata.gz: c9bbc43663fb51f9e8f414702a4aaf7349870ca23f854ce3b9b38220dc32abe42f77820ab840a78708c473d5e30bbb9f918f6ae39025d94b5e94103e9b2ae3de
+  data.tar.gz: 9435b6699cab6da09d974077c8b2ff4f6f83d4f28b0cc44d2fd56419fea1b5bca2cb7347ef86b16a6ede417fddda62ce2d4c03c1e02d9e2ae58b315272701969

data/CHANGELOG.md

@@ -51,6 +51,18 @@ plus daisyUI's modifier groups). `PhlexForms::ClassMerge` is gone.
 
 ### Fixed
 
+- **Client-side validators honour the validator's `message:`** (issue #41).
+  `validates :code, format: { with: /\A[a-z]*\z/, message: "lowercase only" }`
+  used to show the generic "is invalid" in the browser and the specific text
+  only after a round trip. The introspector now emits
+  `data-validations--<validator>-message-value`: a String as is (`%{count}`
+  stays for the browser to fill), a Symbol resolved on the server through
+  ActiveModel's lookup chain in the current locale, a Proc skipped (it needs a
+  record). Length's `too_long:` / `too_short:` / `wrong_length:` win over
+  `message:`, as on the server. Every shipped controller prefers the value and
+  falls back to its bundled message; the submit coordinator collects it too. A
+  `validate: { presence: { message: "…" } }` / `confirmation: { message: "…" }`
+  rules hash now keeps its options (it used to collapse them to `true`).
 - **`rich_textarea` forwards its block into `<lexxy-editor>`**: Lexxy configures
   an editor through CHILD elements — `<lexxy-prompt>` for @mentions,
   `<lexxy-code-language-picker>` for code blocks — but the component rendered

data/README.md

@@ -345,7 +345,19 @@ the form-level `validations--form` coordinator), which `lazyLoadControllersFrom`
 resolves to `phlex_forms/controllers/validations/*_controller` — the path the gem
 ships them at.
 
-Messages ship for `en` / `fr` / `af`; override via `window.PhlexForms.messages`.
+A validator's own `message:` reaches the browser too, so the client shows what
+the server would: a String as is (`%{value}` is filled in, and `%{count}` for
+rules that have one: length and the numericality bounds), a Symbol resolved on
+the server through your app's i18n, a Proc skipped (it needs a record).
+Length's `too_long:` / `too_short:` / `wrong_length:` win over `message:`.
+
+```ruby
+validates :code, format: { with: /\A[a-z]*\z/, message: "may only contain lowercase letters" }
+f.field :note, validate: { length: { maximum: 30, too_long: "keep it under %{count}" } }
+```
+
+Without a `message:`, the bundled messages apply: they ship for `en` / `fr` /
+`af`; override them page-wide via `window.PhlexForms.messages`.
 
 ## Nested attributes, collections & escape valves
 

data/app/javascript/phlex_forms/controllers/validations/acceptance_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::AcceptanceValidator. For
 // checkboxes, asserts `.checked`. For other inputs, asserts the
@@ -11,11 +10,11 @@ export default class extends FieldValidatorController {
 
   check(value) {
     if (this.element.type === "checkbox") {
-      return this.element.checked ? null : t("js.forms.validations.acceptance.accepted")
+      return this.element.checked ? null : this.messageOr("js.forms.validations.acceptance.accepted")
     }
     try {
       const list = JSON.parse(this.acceptValue)
-      return list.map(String).includes(String(value ?? "")) ? null : t("js.forms.validations.acceptance.accepted")
+      return list.map(String).includes(String(value ?? "")) ? null : this.messageOr("js.forms.validations.acceptance.accepted")
     } catch (_e) {
       return null
     }

data/app/javascript/phlex_forms/controllers/validations/base_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { interpolate, t } from "phlex_forms/i18n"
 
 // Shared base for every field-level validator. Subclasses implement
 // `check(value)` and return either `null` (valid) or a translation
@@ -8,7 +9,8 @@ import { Controller } from "@hotwired/stimulus"
 //
 // Each subclass declares its own `static values` for the rules it
 // reads from data attributes; the base class only knows about the
-// `allowBlank` / `allowNil` short-circuits.
+// `allowBlank` / `allowNil` short-circuits and the `message` value,
+// which carries the validator's own `message:` option (issue #41).
 export class FieldValidatorController extends Controller {
   // `error` is opt-in: callers that pre-render a `<p data-validations--<validator>-target="error">`
   // get a stable slot the controller toggles. Inputs without an
@@ -18,6 +20,7 @@ export class FieldValidatorController extends Controller {
   static values = {
     allowBlank: { type: Boolean, default: false },
     allowNil: { type: Boolean, default: false },
+    message: String,
   }
 
   // Element must be the input itself — these controllers are attached
@@ -64,6 +67,14 @@ export class FieldValidatorController extends Controller {
     return null
   }
 
+  // The validator's own `message:` when the server rendered one, else the
+  // bundled translation for `key`. Either way `%{count}` & co. are filled in;
+  // a custom message may also carry `%{value}`, as on the server.
+  messageOr(key, vars = {}) {
+    if (!(this.hasMessageValue && this.messageValue)) return t(key, vars)
+    return interpolate(this.messageValue, { value: this.fieldValue(), ...vars })
+  }
+
   shouldSkip(value) {
     if (this.allowNilValue && (value === null || value === undefined)) return true
     if (this.allowBlankValue && this.isBlank(value)) return true

data/app/javascript/phlex_forms/controllers/validations/confirmation_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::ConfirmationValidator. Looks
 // for the `<name>_confirmation` field by name within the same form
@@ -15,7 +14,7 @@ export default class extends FieldValidatorController {
     if (!form) return null
     const partner = form.elements[this.matchValue] || this.partnerByAttribute(form)
     if (!partner) return null
-    return String(partner.value) === String(value ?? "") ? null : t("js.forms.validations.confirmation.confirmation")
+    return String(partner.value) === String(value ?? "") ? null : this.messageOr("js.forms.validations.confirmation.confirmation")
   }
 
   partnerByAttribute(form) {

data/app/javascript/phlex_forms/controllers/validations/exclusion_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::ExclusionValidator.
 export default class extends FieldValidatorController {
@@ -11,7 +10,7 @@ export default class extends FieldValidatorController {
     if (!this.hasInValue) return null
     try {
       const list = JSON.parse(this.inValue)
-      return list.map(String).includes(String(value ?? "")) ? t("js.forms.validations.exclusion.exclusion") : null
+      return list.map(String).includes(String(value ?? "")) ? this.messageOr("js.forms.validations.exclusion.exclusion") : null
     } catch (_e) {
       return null
     }

data/app/javascript/phlex_forms/controllers/validations/format_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::FormatValidator.
 export default class extends FieldValidatorController {
@@ -12,7 +11,7 @@ export default class extends FieldValidatorController {
     if (!this.hasPatternValue) return null
     try {
       const regex = new RegExp(this.patternValue, this.flagsValue)
-      return regex.test(String(value ?? "")) ? null : t("js.forms.validations.format.invalid")
+      return regex.test(String(value ?? "")) ? null : this.messageOr("js.forms.validations.format.invalid")
     } catch (_e) {
       // If Rails' regex doesn't translate cleanly to JS, fall back to
       // letting the server be the authority — don't block submit on a

data/app/javascript/phlex_forms/controllers/validations/inclusion_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::InclusionValidator.
 export default class extends FieldValidatorController {
@@ -11,7 +10,7 @@ export default class extends FieldValidatorController {
     if (!this.hasInValue) return null
     try {
       const list = JSON.parse(this.inValue)
-      return list.map(String).includes(String(value ?? "")) ? null : t("js.forms.validations.inclusion.inclusion")
+      return list.map(String).includes(String(value ?? "")) ? null : this.messageOr("js.forms.validations.inclusion.inclusion")
     } catch (_e) {
       return null
     }

data/app/javascript/phlex_forms/controllers/validations/length_controller.js

@@ -1,8 +1,9 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
+import { interpolate } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::LengthValidator. Reads:
 //   - maximum / minimum / is
+//   - too-long / too-short / wrong-length messages (win over `message`)
 //   - allow-blank / allow-nil
 //
 // Counter is rendered next to the input when `maximum` is set, so
@@ -20,6 +21,9 @@ export default class extends FieldValidatorController {
     maximum: Number,
     minimum: Number,
     is: Number,
+    tooLongMessage: String,
+    tooShortMessage: String,
+    wrongLengthMessage: String,
   }
 
   connect() {
@@ -41,17 +45,24 @@ export default class extends FieldValidatorController {
     const length = this.codepointLength(value)
 
     if (this.hasIsValue && length !== this.isValue) {
-      return t("js.forms.validations.length.wrong_length", { count: this.isValue })
+      return this.lengthMessage(this.wrongLengthMessageValue, "wrong_length", this.isValue)
     }
     if (this.hasMaximumValue && length > this.maximumValue) {
-      return t("js.forms.validations.length.too_long", { count: this.maximumValue })
+      return this.lengthMessage(this.tooLongMessageValue, "too_long", this.maximumValue)
     }
     if (this.hasMinimumValue && length < this.minimumValue) {
-      return t("js.forms.validations.length.too_short", { count: this.minimumValue })
+      return this.lengthMessage(this.tooShortMessageValue, "too_short", this.minimumValue)
     }
     return null
   }
 
+  // A per-case message (`too_long:` & co.) wins over `message:`, as on the
+  // server; the bundled translation is the final fallback.
+  lengthMessage(caseMessage, key, count) {
+    if (caseMessage) return interpolate(caseMessage, { value: this.fieldValue(), count })
+    return this.messageOr(`js.forms.validations.length.${key}`, { count })
+  }
+
   updateCounter = () => {
     const counter = this.counterElement()
     if (!counter) return

data/app/javascript/phlex_forms/controllers/validations/numericality_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::NumericalityValidator.
 export default class extends FieldValidatorController {
@@ -20,40 +19,40 @@ export default class extends FieldValidatorController {
     if (raw === "") return null
 
     const number = Number(raw)
-    if (Number.isNaN(number)) return t("js.forms.validations.numericality.not_a_number")
+    if (Number.isNaN(number)) return this.messageOr("js.forms.validations.numericality.not_a_number")
 
     if (this.onlyIntegerValue && !Number.isInteger(number)) {
-      return t("js.forms.validations.numericality.not_an_integer")
+      return this.messageOr("js.forms.validations.numericality.not_an_integer")
     }
     if (this.hasGreaterThanValue && !(number > this.greaterThanValue)) {
-      return t("js.forms.validations.numericality.greater_than", { count: this.greaterThanValue })
+      return this.messageOr("js.forms.validations.numericality.greater_than", { count: this.greaterThanValue })
     }
     if (this.hasGreaterThanOrEqualToValue && !(number >= this.greaterThanOrEqualToValue)) {
-      return t("js.forms.validations.numericality.greater_than_or_equal_to", {
+      return this.messageOr("js.forms.validations.numericality.greater_than_or_equal_to", {
         count: this.greaterThanOrEqualToValue,
       })
     }
     if (this.hasLessThanValue && !(number < this.lessThanValue)) {
-      return t("js.forms.validations.numericality.less_than", { count: this.lessThanValue })
+      return this.messageOr("js.forms.validations.numericality.less_than", { count: this.lessThanValue })
     }
     if (this.hasLessThanOrEqualToValue && !(number <= this.lessThanOrEqualToValue)) {
-      return t("js.forms.validations.numericality.less_than_or_equal_to", {
+      return this.messageOr("js.forms.validations.numericality.less_than_or_equal_to", {
         count: this.lessThanOrEqualToValue,
       })
     }
     if (this.hasEqualToValue && number !== this.equalToValue) {
-      return t("js.forms.validations.numericality.equal_to", { count: this.equalToValue })
+      return this.messageOr("js.forms.validations.numericality.equal_to", { count: this.equalToValue })
     }
     if (this.hasOtherThanValue && number === this.otherThanValue) {
-      return t("js.forms.validations.numericality.other_than", { count: this.otherThanValue })
+      return this.messageOr("js.forms.validations.numericality.other_than", { count: this.otherThanValue })
     }
     // Rails' NumericalityValidator coerces with `.to_i` before
     // checking parity, so `2.5` is treated as `2` (even). JS `%` on
     // a float diverges from that — truncate first to keep client and
     // server in agreement.
     const truncated = Math.trunc(number)
-    if (this.oddValue && truncated % 2 === 0) return t("js.forms.validations.numericality.odd")
-    if (this.evenValue && truncated % 2 !== 0) return t("js.forms.validations.numericality.even")
+    if (this.oddValue && truncated % 2 === 0) return this.messageOr("js.forms.validations.numericality.odd")
+    if (this.evenValue && truncated % 2 !== 0) return this.messageOr("js.forms.validations.numericality.even")
     return null
   }
 }

data/app/javascript/phlex_forms/controllers/validations/presence_controller.js

@@ -1,5 +1,4 @@
 import { FieldValidatorController } from "phlex_forms/controllers/validations/base_controller"
-import { t } from "phlex_forms/i18n"
 
 // Mirrors ActiveModel::Validations::PresenceValidator.
 export default class extends FieldValidatorController {
@@ -9,6 +8,6 @@ export default class extends FieldValidatorController {
 
   check(value) {
     if (!this.requiredValue) return null
-    return this.isBlank(value) ? t("js.forms.validations.presence.blank") : null
+    return this.isBlank(value) ? this.messageOr("js.forms.validations.presence.blank") : null
   }
 }

data/app/javascript/phlex_forms/i18n.js

@@ -26,7 +26,7 @@ function lookup(scope, locale) {
   return scope.split(".").reduce((node, key) => (node == null ? undefined : node[key]), table)
 }
 
-function interpolate(string, vars) {
+export function interpolate(string, vars = {}) {
   return string.replace(/%\{(\w+)\}/g, (_, key) => (key in vars ? String(vars[key]) : `%{${key}}`))
 }
 

data/lib/forms/validations/introspector.rb

@@ -46,6 +46,11 @@ module Forms
         only_integer odd even
       ].freeze
 
+      # LengthValidator's per-case messages; each wins over `message:` on the
+      # server, so the length controller checks them first. Each maps to the
+      # bound it reports, so a Symbol resolves with that count.
+      LENGTH_MESSAGE_KEYS = { too_long: :maximum, too_short: :minimum, wrong_length: :is }.freeze
+
       # Convenience: returns a null introspector for nil models so
       # callers don't need to guard.
       def self.for(model_or_class)
@@ -83,7 +88,8 @@ module Forms
           next unless suffix
 
           controllers << "#{CONTROLLER_PREFIX}--#{suffix}"
-          value_attributes(suffix, validator, attribute).each do |key, value|
+          value_attributes(suffix, validator, attribute).merge(message_attrs(suffix, validator, attribute))
+            .each do |key, value|
             attrs[data_key(suffix, key)] = value
           end
         end
@@ -131,6 +137,23 @@ module Forms
         end
       end
 
+      # `message` (and length's `too_long_message` & co.) values, for the
+      # validator's own `message:` options. Omitted when there is none, or when
+      # it can't be resolved without a record, so the generic message stays.
+      def message_attrs(suffix, validator, attribute)
+        counts = suffix == "length" ? length_message_counts(validator) : {}
+        options = counts.keys + [:message]
+        options.each_with_object({}) do |option, attrs|
+          text = Message.resolve(validator.options[option], model_class:, attribute:, count: counts[option])
+          attrs[option == :message ? :message : :"#{option}_message"] = text if text
+        end
+      end
+
+      def length_message_counts(validator)
+        bounds = length_attrs(validator)
+        LENGTH_MESSAGE_KEYS.to_h { |option, bound| [option, bounds[bound]&.to_i] }
+      end
+
       def presence_attrs
         { required: "true" }
       end

data/lib/forms/validations/manual_rules.rb

@@ -13,7 +13,7 @@ module Forms
     #   ManualRules.new(
     #     length: { maximum: 60, minimum: 3 },
     #     presence: true,
-    #     format: { with: /\A[a-z]+\z/i },
+    #     format: { with: /\A[a-z]+\z/i, message: "letters only" },
     #     numericality: { greater_than_or_equal_to: 0 },
     #     inclusion: { in: %w[a b c] },
     #     exclusion: { in: %w[admin] },
@@ -49,7 +49,7 @@ module Forms
           captured_rules.each do |key, opts|
             case key
             when :presence
-              validates :value, presence: true if opts
+              validates :value, presence: opts.is_a?(Hash) ? opts : true if opts
             when :length
               validates :value, length: opts
             when :format
@@ -61,7 +61,7 @@ module Forms
             when :exclusion
               validates :value, exclusion: opts
             when :confirmation
-              validates :value, confirmation: true if opts
+              validates :value, confirmation: opts.is_a?(Hash) ? opts : true if opts
             when :acceptance
               validates :value, acceptance: opts.is_a?(Hash) ? opts : { accept: %w[1 true] }
             end

data/lib/forms/validations/message.rb

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Forms
+  module Validations
+    # Turns a validator's `message:` option into the text the browser should
+    # show, so the client mirror says what the server would (issue #41).
+    #
+    #   - a String is emitted as is; `%{count}`-style placeholders stay in place
+    #     for the Stimulus controller to fill, as it does for its own messages.
+    #     A blank String resolves to nil: the browser reads "" as valid.
+    #   - a Symbol is resolved on the server through ActiveModel's lookup chain
+    #     (`<scope>.errors.models.<model>.attributes.<attr>.<key>` ... then
+    #     `errors.messages.<key>`), in the current locale. With a known `count:`
+    #     (length's per-case messages) it is passed to I18n, so a pluralised
+    #     translation picks the right form; otherwise `%{count}` stays a
+    #     placeholder and the plural `:other` form is used.
+    #   - anything else (a Proc needs a record) resolves to nil, so the
+    #     controller keeps its generic message.
+    #
+    # Mirrors `ActiveModel::Error.generate_message` against the class alone: the
+    # introspector never instantiates the model.
+    class Message
+      # Interpolations the browser fills in, kept as literal placeholders.
+      PLACEHOLDERS = { count: "%{count}", value: "%{value}" }.freeze
+
+      def self.resolve(message, model_class:, attribute:, count: nil)
+        case message
+        when String then message unless message.empty?
+        when Symbol then new(model_class, attribute).translate(message, count:)
+        end
+      end
+
+      def initialize(model_class, attribute)
+        @model_class = model_class
+        @attribute = attribute.to_s
+      end
+
+      def translate(key, count: nil)
+        return unless defined?(I18n)
+
+        first, *rest = lookup_keys(key)
+        vars = interpolations
+        vars[:count] = count unless count.nil?
+        I18n.translate(first, **vars, default: rest, raise: true)
+      rescue StandardError
+        nil
+      end
+
+      private
+
+      attr_reader :model_class, :attribute
+
+      def lookup_keys(key)
+        model_keys(key) + [:"errors.attributes.#{attribute}.#{key}", :"errors.messages.#{key}"]
+      end
+
+      def model_keys(key)
+        return [] unless model_class.respond_to?(:i18n_scope) && model_class.respond_to?(:lookup_ancestors)
+
+        scope = model_class.i18n_scope
+        keys = model_class.lookup_ancestors.flat_map do |klass|
+          i18n_key = klass.model_name.i18n_key
+          [:"#{scope}.errors.models.#{i18n_key}.attributes.#{attribute}.#{key}",
+            :"#{scope}.errors.models.#{i18n_key}.#{key}"]
+        end
+        keys << :"#{scope}.errors.messages.#{key}"
+      end
+
+      def interpolations
+        names = {}
+        names[:model] = model_class.model_name.human if model_class.respond_to?(:model_name)
+        names[:attribute] = model_class.human_attribute_name(attribute) if model_class.respond_to?(:human_attribute_name)
+        PLACEHOLDERS.merge(names)
+      end
+    end
+  end
+end

data/lib/phlex_forms/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexForms
-  VERSION = "0.4.0"
+  VERSION = "0.4.1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex-forms
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.1
 platform: ruby
 authors:
 - Mikael Henriksson
@@ -178,6 +178,7 @@ files:
 - lib/forms/toggle.rb
 - lib/forms/validations/introspector.rb
 - lib/forms/validations/manual_rules.rb
+- lib/forms/validations/message.rb
 - lib/forms/wrapped_input.rb
 - lib/phlex-forms.rb
 - lib/phlex_forms.rb