diff --git a/CHANGELOG.md b/CHANGELOG.md index d232f8abef..26449723f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ ### Enhancements * Add `JS.toggle_class` * Force update select options when the options changed from the server while a select has focus + * Introduce `phx-feedback-group` for handling feedback for composite input groups ## 0.20.3 (2024-01-02) diff --git a/guides/client/bindings.md b/guides/client/bindings.md index 9575fa7281..b2d315b371 100644 --- a/guides/client/bindings.md +++ b/guides/client/bindings.md @@ -17,7 +17,7 @@ callback, for example: |------------------------|------------| | [Params](#click-events) | `phx-value-*` | | [Click Events](#click-events) | `phx-click`, `phx-click-away` | -| [Form Events](form-bindings.md) | `phx-change`, `phx-submit`, `phx-feedback-for`, `phx-disable-with`, `phx-trigger-action`, `phx-auto-recover` | +| [Form Events](form-bindings.md) | `phx-change`, `phx-submit`, `phx-feedback-for`, `phx-feedback-group` `phx-disable-with`, `phx-trigger-action`, `phx-auto-recover` | | [Focus Events](#focus-and-blur-events) | `phx-blur`, `phx-focus`, `phx-window-blur`, `phx-window-focus` | | [Key Events](#key-events) | `phx-keydown`, `phx-keyup`, `phx-window-keydown`, `phx-window-keyup`, `phx-key` | | [Scroll Events](#scroll-events-and-infinite-stream-pagination) | `phx-viewport-top`, `phx-viewport-bottom` | diff --git a/guides/client/form-bindings.md b/guides/client/form-bindings.md index 30a7ffab52..a1c3fda1d5 100644 --- a/guides/client/form-bindings.md +++ b/guides/client/form-bindings.md @@ -104,13 +104,12 @@ end _Note_: only the individual input is sent as params for an input marked with `phx-change`. -## `phx-feedback-for` +## Error Feedback -For proper form error tag updates, the error tag must specify which -input it belongs to. This is accomplished with the `phx-feedback-for` attribute, -which specifies the name (or id, for backwards compatibility) of the input it belongs to. -Failing to add the `phx-feedback-for` attribute will result in displaying error -messages for form fields that the user has not changed yet (e.g. required +For proper error feedback on form updates, the error tags must specify which +input they belong to. This is accomplished with the `phx-feedback-for` and `phx-feedback-group` attributes. + +The `phx-feedback-for` annotation which specifies the name (or id, for backwards compatibility) of the input it belongs to. Failing to add the `phx-feedback-for` attribute will result in displaying error messages for form fields that the user has not changed yet (e.g. required fields further down on the page). For example, your `MyAppWeb.CoreComponents` may use this function: @@ -148,6 +147,8 @@ Now, any DOM container with the `phx-feedback-for` attribute will receive a user input/focus. Using new CSS rules or tailwindcss variants allows you errors to be shown, hidden, and styled as feedback changes. +Likewise, the `phx-feedback-group` attribute behaves similarly `phx-feedback-for`, but allows error tags and inputs to specify a composite name for a group of inputs. + ## Number inputs Number inputs are a special case in LiveView forms. On programmatic updates,