Render Multiple Field Validation Errors with Flux UI and Blade

Punyapal Shah
Suppress default single-error tooltips in Flux UI components and iterate over all validation messages per field using Blade error directives.

When a single form field fails multiple validation rules (for example, a password field failing length, numbers, and special character rules), default input components only display the first error message.

You can pass `error:message=""` to Flux UI components to suppress the inline single-error message and render a custom error list beneath the input:

<!-- Password input with custom multi-error list -->
<flux:input
    name="password"
    :label="__('Password')"
    type="password"
    required
    autocomplete="new-password"
    :placeholder="__('Password')"
    passwordrules="{{ \Illuminate\Validation\Rules\Password::defaults()->toPasswordRulesString() }}"
    error:message=""
    viewable
/>

@if ($errors->has('password'))
    <ul class="mt-3 space-y-1 text-sm font-medium text-red-500 dark:text-red-400">
        @foreach ($errors->get('password') as $message)
            <li>{{ $message }}</li>
        @endforeach
    </ul>
@endif
  • error:message="" prevents double error messages in custom component setups
  • $errors->get('field') returns an array of all validation failures for that key
  • Provides clear feedback for complex password policy rules
Tags: #Laravel #Livewire #Blade #Validation
Share on X

// Found an issue or want to contribute a tip? github.com/MrPunyapal/tips