我有一个Blazor的网页使用bootstrap 5.1.0与以下形式，验证是纯粹的客户端：

<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上，但是如果我这样做，验证消息会永久显示。
当表单以空值提交时，我如何让验证消息显示在输入下方，如下所示：