ajax request login blade

resources/views/vendor/nova/pages/login.blade.php

@@ -1,5 +1,20 @@
 @extends('vendor.nova.partials.auth-layout')
 
+@push('js')
+<script>
+    async function login(event) {
+        const response = await postData(event.target.action, getFormData(event))
+        console.log(response)
+    
+    if (response.errors) {
+    loopObject(response.errors, item => addValidationClasses(item))
+    } else {
+        removeValidationClasess()
+    }
+    }
+</script>
+@endpush
+
 @section('content')
     <div class="login-section d-center items-center h-screen">
         <div class="d-none h-full max-w-4xl">
@@ -9,7 +24,12 @@
             {{--  <div class="logo">
                 <img src="assets/images/logo-login.png" width="100px">
             </div> --}}
-            <form class="bg-white dark:bg-gray-800 rounded-lg p-8 w-[25rem] mx-auto" method="POST" action="{{ route('login') }}">
+            <form  
+                method="POST" 
+                action="{{ route('login') }}"
+                onsubmit="event.preventDefault();login(event)"
+                class="bg-white dark:bg-gray-800 rounded-lg p-8 w-[25rem] mx-auto"
+                >
                 @csrf
                 <h2 class="text-2xl text-center font-normal mb-6">{{ __('Online panel') }}</h2>
                 <svg class="block mx-auto mb-6" xmlns="http://www.w3.org/2000/svg" width="100" height="2" viewBox="0 0 100 2">
@@ -19,25 +39,30 @@
                     <label class="block mb-2" for="username">
                         {{ __('Username') }}
                     </label>
-                    <input class="form-control form-input form-input-bordered w-full @error('username') form-input-border-error @enderror" id="username" type="text" name="username" autofocus="" value="{{ old('username') }}">
+                    <input class="form-control form-input form-input-bordered w-full" 
+                        id="username" 
+                        type="text" 
+                        name="username" 
+                        autofocus="" 
+                        value="{{ old('username') }}"
+                    >
+
+                    <span id="username-error-box" class="text-red-500 text-italic error-box"></span>
 
-                    @error('username')
-                        <span class="text-red-500 text-italic">
-                            <strong>{{ $message }}</strong>
-                        </span>
-                    @enderror
                 </div>
                 <div class="mb-6">
                     <label class="block mb-2" for="password">
                         {{ __('Password') }}
                     </label>
-                    <input class="form-control form-input form-input-bordered w-full @error('username') form-input-border-error @enderror" id="password" type="password" name="password">
+                    <input 
+                        class="form-control form-input form-input-bordered w-full" 
+                        id="password" 
+                        type="password" 
+                        name="password"
+                    >
 
-                    @error('password')
-                        <span class="text-red-500 text-italic">
-                            <strong>{{ $message }}</strong>
-                        </span>
-                    @enderror
+                    <span id="password-error-box" class="text-red-500 text-italic error-box"></span>
+                  
                 </div>
                 <div class="flex mb-6">
                     <div class="ml-auto">