我有一個使用bootstrap 5.1.0的Blazor網頁，其形式如下，驗證完全是客戶端的:

<EditForm Model="CheckoutViewModel" OnValidSubmit="@HandleValidSubmit" id="payment-form" class="needs-validation" novalidate="novalidate">
    <DataAnnotationsValidator />

    <div class="row g-3">

        <div class="col-sm-6">
            <label for="firstName" class="form-label">First name</label>
            <InputText type="text" @bind-Value="CheckoutViewModel.FirsName" class="form-control" id="firstName" />
            <div class="invalid-feedback">
                Valid first name is required.
            </div>
            <div data-lastpass-icon-root="true" style="position: relative !important; height: 0px !important; width: 0px !important; float: left !important;"></div>
        </div>

        <div class="col-sm-6">
            <label for="lastName" class="form-label">Last name</label>
            <InputText type="text" @bind-Value="CheckoutViewModel.LastName" class="form-control" id="lastName" />
            <div class="invalid-feedback">
                Valid last name is required.
            </div>
        </div>

    </div>

    <hr class="my-4">

    <button id="submit" class="w-100 btn btn-primary btn-lg" type="submit">Make Secure Payment</button>

</EditForm>

每次我提交表單時，我看到的都是這樣，驗證明智:

如果我檢查包含invalid-feedback類的div，它被設置為display:none，因此它沒有顯示。

我搜遍了互聯網，試圖找到一種方法來顯示驗證信息，但毫無結果。有些人建議將d-block類放在div上，但是如果我這樣做，驗證消息會永久顯示。

當表單以空值提交時，我如何讓驗證消息顯示在輸入的下面，如下所示: