search

protonemedia / laravel-form-components

A set of Blade components to rapidly build forms with Tailwind CSS (v1.0 and v2.0) and Bootstrap 4/5. Supports validation, model binding, default values, translations, Laravel Livewire, includes default vendor styling and fully customizable!
https://protone.media/blog/laravel-form-components-to-rapidly-build-forms-with-tailwind-css-and-bootstrap-4
MIT License
814 stars 104 forks source link

BS5 Append Validation #78

Open kb6673 opened 2 years ago

kb6673 commented 2 years ago

Just dropping this quick issue here, I'll see if I can do a PR later.

If we have a BS5 field with an append like this

image

            <div class="col">
                <x-form-input-group label="Current Years Gross Profit %">
                    <x-form-input name="current_year_gross_profit"></x-form-input>
                    <x-form-input-group-text>%</x-form-input-group-text>
                </x-form-input-group>
            </div>

...and validation fails, the validation classes split the append group, resulting in this

image

Prepend works fine...

image

irineujunior commented 1 year ago

@kb6673

If you use the name on input-group and block errors on the input, maybe helps.

<x-form-input-group name="password" label="Password" class="input-group-flat" >
    <x-form-input type="password" name="password" :show-errors="false" />
    <x-form-input-group-text>
        <a href="#" class="link-secondary" title="Show password" data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" /></svg>
        </a>
    </x-form-input-group-text>
</x-form-input-group>

image