Focus a field after validation error on Laravel project with Livewire and AlpineJs

Question

Hello i need to focus first field of ErrorBag, I am using Livewire component form and because Livewire send XHR request every input change to update the DOM it will be focused every time on XHR response without submitting the form and it's not what I need, I am using also Alpine Js in the same project and I want focus it with Javascript but I don't know if it is possible to watch a property changes.

function app(){

return {

    errorBag: {!! json_encode(array_keys($errors->getMessages())) !!},
    

    focusField()
    {
     if(this.errorBag.length > 0)
      {
        fieldError = Array.from(document.getElementsByName(errorBag[0]));
        fieldError[0].focus({preventScroll:false});
      }
    }
}

}

In example i want initialize the Alpine component with x-data="app()" and then i want trigger focusField() function if the errorBag property changes to focus only once the field invalid for every form submit. Thanks for your help

Your code has syntax errors, are you sure everything has been copied correctly? — Zer0
– Zer0, Commented Sep 8, 2020 at 15:01
I've updated the code, now you will not receive syntax errors. — Nicola
– Nicola, Commented Sep 8, 2020 at 15:33

Nicola · Accepted Answer · 2020-09-08 16:34:21Z

1

Solved myself

          <div
            x-data="
            { 
              'errors': {{ json_encode(array_keys($errors->getMessages())) }},
              focusField(input){
                  fieldError = Array.from(document.getElementsByName(input));
                  if(fieldError.length > 0){
                    fieldError[0].focus({preventScroll:false});
                  }
              },
            }
            "
            x-init="() => { $watch('errors', value => focusField(value[0])) }"
        >
        </div>

Properties in function app() are not updated,but in x-data object it works perfect.

answered Sep 8, 2020 at 16:34

Nicola

511 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SeaBass Over a year ago

Thanks! I get Alpine Error: "SyntaxError: expected expression, got '}'" from this. Any idea why?

Jeff N · Accepted Answer · 2023-05-09 12:25:59Z

FWIW I didn't really like this and instead use standard validation with:

use Illuminate\Validation\Validator;
    
class ContactForm extends Component
{
    public $name;
    public $email;
 
    protected $rules = [
        'name' => 'required|min:6',
        'email' => 'required|email',
    ];

    public $errors = [];
 
    public function submit()
    {
        $this->withValidator(function (Validator $validator) {
            $validator->after(function ($validator) {
                $this->errors = $validator->failed();
            });
        })->validate();
        ...
    }

}

Then in blade:

<div 
x-data="{
errors: @entangle('errors'),
focusError() {
    es = Object.keys(this.errors);
    if (es.length == 0) { return }
    $focus.focus(document.getElementsByName(es[0])[0]);
  }
}"
x-init="$watch('errors', value => focusError())"
>

You could also scroll to element instead of or in addition to focus.

Collectives™ on Stack Overflow

Focus a field after validation error on Laravel project with Livewire and AlpineJs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related