Add Shorthand for Error Messages in flux:input

[amr-coding]

Background:

I was exploring the Flux documentation and community on Discord, where I encountered a question in the Flux channel about the verbosity of handling error messages for inputs. The user was looking for a simpler way to manage validation errors without needing to explicitly define an error component for each input field within the flux:field, as shown:

<flux:field>
    <flux:input wire:model.live="email" type="email" placeholder="E-Mail" autofocus />
    <flux:error name="email" />
</flux:field>

This setup seemed unnecessarily verbose, particularly for forms with many fields. Motivated by this, I decided to experiment with the Flux components to see if I could implement a more elegant solution.

Description:

I propose adding an attribute, like errorable, to the flux:input component to automatically show validation errors when they occur that also works with flux:field.
This would simplify the current implementation to:

<flux:input wire:model.live="email" placeholder="E-Mail" type="text" errorable autofocus />

errorable1.mp4

• Would it be acceptable to share the modifications I've made to demonstrate this feature?
  (I've adjusted some code in a published Flux file to make this work, but I'm unsure if it's permissible to share that here.)

Benefits:
Simplification: Reduces the amount of code needed to handle forms with many fields.

[jeffchown]

@amr-coding A flux:error is automatically added to any flux:input that has a label="..." attribute.

This is described in the docs: https://fluxui.dev/components/field#shorthand-props

If you try:

    <form wire:submit="save">
        <flux:input wire:model="email" label="email" />
        <flux:button type="submit">Save</flux:button>
    </form>

you will see <div aria-live="assertive" class="mt-3 text-sm font-medium text-red-500 dark:text-red-400 hidden" data-flux-error=""> </div> underneath the input's div.

If there is no label attribute, Flux assumes a minimal layout is desired and only styles the input border on a validation error.

[amr-coding]

In scenarios where a placeholder attribute is used exclusively for a specific UI design, and neither a label nor a description attribute can be added, error messages may no longer function as expected. To address this, try to wrap the input fields with a flux:fieldset element and utilize multiple inputs that only contain placeholders. Error messages will not be displayed anymore.

I understand that when a label is not used, an input border can signal an error. However, this approach doesn't always work effectively. If the input only has a border indicating an error, the user may not be able to clearly identify what is specifically wrong with the field. The error message will clarify the issue, whether it's due to an incorrect format, insufficient characters, or other related problems.

[jeffchown]

I understand that when a label is not used, an input border can signal an error. However, this approach doesn't always work effectively. If the input only has a border indicating an error, the user may not be able to clearly identify what is specifically wrong with the field. The error message will clarify the issue, whether it's due to an incorrect format, insufficient characters, or other related problems.

@amr-coding Exactly. That is why, when there is no label or description for an input (which is a good indicator of a minimalistic form design) Flux leaves it up to the programmer to display any validation errors in a way that would provide the necessary information without breaking the layout, e.g. a bulleted list at the top or bottom of the form.

[bernhardh]

I was the one asking the question ;)

@amr-coding Exactly. That is why, when there is no label or description for an input (which is a good indicator of a minimalistic form design) Flux leaves it up to the programmer to display any validation errors in a way that would provide the necessary information without breaking the layout, e.g. a bulleted list at the top or bottom of the form.

This is a very good point.

If there is no label attribute, Flux assumes a minimal layout is desired and only styles the input border on a validation error.

This is maybe a documentation problem (or maybe its just me), since I was thinking, that it doesn't work at all, since I only tried it without a label.

@amr-coding
Thanks for bringing it up to this discussion.