Validation Strategy: Reward Early; Punish Late

[Alex-S-Davies]

I am trying to implement a validation strategy called Reward Early; Punish Late
(see vuelidate/vuelidate#897 & https://www.smashingmagazine.com/2022/09/inline-validation-web-forms-ux/)

In practice, it means that:

if a value is invalid, as soon as the user fixes the input it should be green again (reward early).
if a value is valid, it shouldn't become red until the user finishes its input -- typically at blur or change events (punish late).

I am quite new to Filament but I think I have managed to implement this strategy using the following traits

Input Trait

<?php

declare(strict_types=1);

namespace App\Filament\Partials\Form;

trait TracksValidationState
{
    public function isDirty(): bool
    {
        return $this->getLivewire()->isDirty($this->getStatePath());
    }

    public function isValid(): bool
    {
        return $this->getLivewire()->isValid($this->getStatePath());
    }

    public function rewardEarlyPunishLateValidation(): static
    {
        $this->extraAlpineAttributes[] = function (): array {
            $statePath = $this->getStatePath();
            return [
                'x-on:blur' => "\$wire.markDirty('$statePath'); \$wire.runValidation('$statePath')",
            ];
        };

        $this->afterStateUpdated[] = function () {
            if (!$this->isValid() && $this->isDirty() && $this->getOldState() !== $this->getState()) {
                $this->getLivewire()->runValidation($this->getStatePath());
            }
        };

        return $this;
    }
}

Livewire Component Trait

<?php

declare(strict_types=1);

namespace App\Filament\Partials\Pages;

use Illuminate\Validation\ValidationException;

trait TracksValidationState
{
    public array $fieldDirtyStatus = [];
    public array $fieldValidityStatus = [];

    public function markDirty(string $field): void
    {
        $this->fieldDirtyStatus[$field] = true;
    }

    public function isDirty(string $field): bool
    {
        return $this->fieldDirtyStatus[$field] ?? false;
    }

    public function isValid(string $field): bool
    {
        return $this->fieldValidityStatus[$field] ?? true;
    }

    public function runValidation(string $field): void
    {
        try {
            $this->validateOnly($field);
            $this->fieldValidityStatus[$field] = true;
        } catch (ValidationException $e) {
            $this->fieldValidityStatus[$field] = false;
            throw $e;
        }
    }
}

Although this works, I really don't think the livewire component should be dealing with any of the logic. Therefore I did refactor this into the following traits:

Input Trait

<?php

declare(strict_types=1);

namespace App\Filament\Partials\Form;

use Illuminate\Validation\ValidationException;

trait TracksValidationState
{
    public bool $isDirty = false;
    public bool $isInvalid = false;

    public function isDirty(): bool
    {
        return $this->isDirty === true;
    }

    public function markDirty(): void
    {
        $this->isDirty = true;
    }

    public function isValid(): bool
    {
        return $this->isInvalid === false;
    }

    public function runValidation(): void
    {
        try {
            $this->getLivewire()->validateOnly($this->getStatePath());
            $this->isInvalid = false;
        } catch (ValidationException $e) {
            $this->isInvalid = true;
            throw $e;
        }
    }

    public function triggerValidity(): void
    {
        $this->markDirty();
        $this->runValidation();
    }

    public function rewardEarlyPunishLateValidation(): static
    {
        $this->extraAlpineAttributes[] = function (): array {
            $key = $this->getKey();
            return [
                'x-on:blur' => "\$wire.triggerValidity('$key')",
            ];
        };

        $this->afterStateUpdated[] = function () {
            if (!$this->isValid() && $this->isDirty() && $this->getOldState() !== $this->getState()) {
                $this->runValidation();
            }
        };

        return $this;
    }
}

Livewire Component Trait

<?php

declare(strict_types=1);

namespace App\Filament\Partials\Pages;

trait TracksValidationState
{
    public function triggerValidity(string $key, string $form = 'form'): void
    {
        $this->getForm($form)->getComponent($key)->triggerValidity();
    }
}

Which still leaves some logic in the livewire component (is there something I can do with registerListeners inside the input class instead?), is at least more contained. However, this refactor doesn't work because I think the Input Components gets refreshed on a validation failure. Can anyone help here?

If this idea is useful to others, I would love to see it make it in core.
I would be more than happy to try and make a PR