I am getting this error in console
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at plugins.bundle.js:71:58611
at Array.forEach (<anonymous>)
at plugins.bundle.js:71:58588
at plugins.bundle.js:71:58728
at Array.forEach (<anonymous>)
at classSet (plugins.bundle.js:71:58533)
at a.install (plugins.bundle.js:80:1236)
at t.install (plugins.bundle.js:80:111805)
at e.registerPlugin (plugins.bundle.js:71:46998)
at plugins.bundle.js:71:61144
this is my login page code:
@extends('auth.layouts.app')
@section('title', 'Login')
@section('content')
<div class="d-flex flex-column flex-root" id="kt_app_root">
<!--begin::Authentication - Sign-in -->
<div class="d-flex flex-column flex-lg-row flex-column-fluid">
<!--begin::Body-->
<div class="d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1">
<!--begin::Form-->
<div class="d-flex flex-center flex-column flex-lg-row-fluid">
<!--begin::Wrapper-->
<div class="w-lg-500px p-10">
<!--begin::Form-->
<form method="POST" action="{{ route('login') }}">
@csrf
<!--begin::Heading-->
<div class="text-center mb-11">
<!--begin::Title-->
<h1 class="text-dark fw-bolder mb-3">Sign In</h1>
<!--end::Title-->
<!--begin::Subtitle-->
<div class="text-gray-500 fw-semibold fs-6">Login to your account</div>
<!--end::Subtitle=-->
</div>
<!--begin::Heading-->
<!--begin::Input group=-->
<div class="fv-row mb-8">
<!--begin::Email-->
<input id="email" type="email"
class=" form-control bg-transparent form-control @error('email') is-invalid @enderror"
name="email" value="{{ old('email') }}" placeholder="Email" required
autocomplete="email" autofocus>
@error('email')
<span class="invalid-feedback" role="alert">
{{ $message }}
</span>
@enderror
<!--end::Email-->
</div>
<!--end::Input group=-->
<div class="fv-row mb-3">
<!--begin::Password-->
<input id="password" type="password"
class=" form-control bg-transparent form-control @error('password') is-invalid @enderror"
name="password" placeholder="Password" required autocomplete="current-password">
@error('password')
<span class="invalid-feedback" role="alert">
{{ $message }}
</span>
@enderror
<!--end::Password-->
</div>
<!--end::Input group=-->
<!--begin::Wrapper-->
<div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
<div></div>
<!--begin::Link-->
Forgot Password
?
<!--end::Link-->
</div>
<!--end::Wrapper-->
<!--begin::Submit button-->
<div class="d-grid mb-10">
<button type="submit" id="kt_sign_in_submit" class="btn btn-primary">
<!--begin::Indicator label-->
<span class="indicator-label">Sign In</span>
<!--end::Indicator label-->
</button>
</div>
<!--end::Submit button-->
<!--begin::Sign up-->
<div class="text-gray-500 text-center fw-semibold fs-6">Not a Member yet?
Sign up
</div>
<!--end::Sign up-->
</form>
<!--end::Form-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Form-->
</div>
<!--end::Body-->
</div>
<!--end::Authentication - Sign-in-->
</div>
@endsection
Hi,
By default the login forms use the FormValidation plugin and this plugins require to use of fv-row
class on the wrapper elements of the form inputs. Please double check your code and follow the original theme makrup.
Regards.