Laravel 8：表单验证无法正常工作

Question

I have a form like this:

<form action="{{ route('profile.2fa.phone') }}">
    @csrf
    <div class="form-group">
        <label for="token" class="col-form-label">Token</label>
        <input type="text" class="form-control @error('token') is-invalid @enderror" name="token" placeholder="enter your token">
        @error('token')
            <span class="invalid-feedback">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>
    <div class="form-group">
        <button class="btn btn-primary">Validate token</button>
    </div>
</form>

In this form, if the input field was empty this class="form-control @error('token') is-invalid @enderror" should make a red rectangle around the form input, and also, {{ $message }} should return the message The token field is required .

Now the problem is, it does not work at all, I mean when you leave the input empty, and click on the button. there is no error reporting on page somehow.

So my question is, how to solve this problem and validate this form so a user can not leave the input empty?

UPDATE: Controller ProfileController has two methods related to this blade:

public function getPhoneVerify()
{
    return view('profile.phone-verify');
}

public function postPhoneVerify(Request $request)
{
    $request->validate([
        'token' => 'required'
    ]);


    return $request->token;
}

And on web.php these two routes handle the requests:

Route::get('profile/twofactor/phone', [App\Http\Controllers\ProfileController::class, 'getPhoneVerify'])->name('profile.2fa.phone');
Route::post('profile/twofactor/phone', [App\Http\Controllers\ProfileController::class, 'postPhoneVerify']);

Answer 1

Bootstrap is buggy. Try changing this line:

<span class="invalid-feedback">

to:

<span class="text-danger">

and see if it works or not.