Form validation

70 · Forms

Form fields show Laravel validation errors from $errors on their own: if there is an error for the field name, the border turns red and the message appears below the field. No extra code is needed.

$errors

Failed submission

The error is looked up by the field's name value (or its wire:model value if there is none). When validate() is called in a Livewire component or $request->validate() in a classic controller, the fields show their errors on their own.

LIVE EXAMPLE

<form class="grid gap-4 md:grid-cols-2">
    <acun:input wire:model="name" label="Customer name" required />
    <acun:input-group wire:model="phone" label="Phone" prefix="+90" value="532 11" />
    <acun:select wire:model="group" label="Customer group" :options="['1' => 'Individual']" placeholder="Select…" />
    <acun:input-group wire:model="creditLimit" label="Credit limit" suffix="₺" value="0" />
    <div class="md:col-span-2"><acun:button type="submit">Save</acun:button></div>
</form>

Prop	Values
`name / wire:model`	Field name the error is looked up by

Hint and error

While there is an error, the field's hint text is hidden and the error message is shown in its place; once the error is fixed, the hint comes back. So it is safe to put format explanations in the hint.

LIVE EXAMPLE

<div class="grid gap-4 md:grid-cols-2">
    <acun:input name="password_hint" type="password" label="Password" hint="At least 8 characters." />
    <acun:input name="password_error" type="password" label="Password" hint="At least 8 characters." value="1234" />
</div>

Prop	Values
`hint`	Shown when there is no error

Fields that do not show errors themselves

The fields that show errors automatically are acun:input (and acun:date-picker, which uses it), acun:select, acun:combobox, acun:textarea and acun:input-group. For checkboxes, radio buttons, switches, tag inputs and option cards, add the message yourself with @error.

LIVE EXAMPLE

<div class="flex flex-col gap-1.5">
    <acun:checkbox name="terms" label="I accept the terms of use" />
    @error('terms')
        <p class="text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

Prop	Values
`@error`	checkbox · radio · switch · tag-input · option-card · input-otp · range

With Livewire

Collect the rules in rules() and call validate() when saving. To validate a field every time it changes, use validateOnly() inside updated(); if you combine this with wire:model.live.blur, the error appears when the user leaves the field (in Livewire 4, .blur alone sends no request, so the server does not see the value).

PHP

protected function rules(): array
{
    return [
        'name' => ['required', 'string', 'max:120'],
        'phone' => ['required', 'digits:10'],
        'group' => ['required', 'exists:customer_groups,id'],
    ];
}

public function updated(string $field): void
{
    $this->validateOnly($field);
}

public function save(): void
{
    $data = $this->validate();
    // …
}