Scroll on validation

How can i scroll to first validation error field?

3 Replies

I don't think there's anything built in for this. You'll have to do it yourself using some js. something like

document.querySelector('.fi-fo-field-wrp-error-message').scrollIntoView()

document.querySelector('.fi-fo-field-wrp-error-message').scrollIntoView()

this should scroll to the first element with a validation error https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Xavi•7mo ago

and where i must put this code ChesterS? i try to register macro like this

public function boot(): void
{
    Component::macro('scrollOnFail', function (string $query, callable $closure) {
        try {
            $closure();
        } catch (ValidationException $e) {
            $this->dispatch('app:scroll-to', [
                'query' => $query,
            ]);

            throw $e;
        }
    });
}

public function boot(): void
{
    Component::macro('scrollOnFail', function (string $query, callable $closure) {
        try {
            $closure();
        } catch (ValidationException $e) {
            $this->dispatch('app:scroll-to', [
                'query' => $query,
            ]);

            throw $e;
        }
    });
}

and call it by

 $this->scrollOnFail('.fi-fo-field-wrp-error-message', function () {
    $this->form->getState();
});

 $this->scrollOnFail('.fi-fo-field-wrp-error-message', function () {
    $this->form->getState();
});

but it doesn't workds

ChesterS•7mo ago

Sorry, this is JS code so you have to find a way to add it into the frontend. Not sure what the best way would be. Maybe a render hook?

Gaming

Programming

Scroll on validation