title: how to scroll to first validation error message in livewire laravel
body: <p>I am new in livewire. i am working on registration process of user. Register form is quite big and validations also working fine to me. The problem is when user submits the form validations came but user not able to see because submit button is at bottom and form is at top.</p>
  <p>When i manually scroll to top error message is displaying. So what i want when user submits the form its will automatically go to first error message. Here is my code:</p>
  <pre><code>&lt;form wire:submit.prevent=&quot;userRegister&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
          &lt;label&gt;First Name *&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-9&quot;&gt;
          &lt;input type=&quot;text&quot; wire:model=&quot;register.first_name&quot; placeholder=&quot;Enter First Name&quot; required&gt;
          @error('register.first_name') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt; @enderror
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
          &lt;label&gt;Last Name *&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-9&quot;&gt;
          &lt;input type=&quot;text&quot; wire:model=&quot;register.last_name&quot; placeholder=&quot;Enter Last Name&quot;&gt;
          @error('register.last_name') &lt;span class=&quot;text-danger&quot;&gt;{{ $message }}&lt;/span&gt; @enderror
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
          &lt;label&gt;Test 1 Name *&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-9&quot;&gt;
          &lt;input type=&quot;text&quot; wire:model=&quot;register.test1_name&quot; placeholder=&quot;Enter Last Name&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
          &lt;label&gt;Test 2 Name *&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-9&quot;&gt;
          &lt;input type=&quot;text&quot; wire:model=&quot;register.test2_name&quot; placeholder=&quot;Enter Last Name&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;
          &lt;label&gt;Test 3 Name *&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col-md-9&quot;&gt;
          &lt;input type=&quot;text&quot; wire:model=&quot;register.test3_name&quot; placeholder=&quot;Enter Last Name&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-3&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;col-md-9&quot;&gt;
          &lt;!--&lt;input type=&quot;submit&quot; value=&quot;Edit&quot; class=&quot;edt-sb&quot;&gt;--&gt;
          &lt;input wire:click=&quot;userRegister&quot; type=&quot;submit&quot; value=&quot;Submit&quot; class=&quot;edt-sv&quot;&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>My Register.php</p>
  <pre><code>&lt;?php
  
  namespace App\Http\Livewire;
  
  use Livewire\Component;
  class Register extends Component
  {
  public $register;
  protected $rules = [
      'register.first_name' =&gt; 'bail|required|max:50',
      'register.last_name' =&gt; 'bail|required|max:50',
  ];
  
  protected $messages = [
      'register.first_name.required' =&gt; 'Please enter first name',
  ];
  
  public function userRegister(){
      $this-&gt;validate();
  }
  </code></pre>
  <p>I want when user submits the form it will immediately scroll to first error message. Currently my validations work perfects for me. Do i need to use alpine js? for this.</p>