Bootstrap 5 validation message not showing

Question

我有一个使用 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>

每次我提交表单时，这就是我看到的验证明智的内容：

如果我检查包含无效反馈类的 div，它会被设置为 display:none，因此它不会显示。

我在互联网上搜索，试图找到一种显示验证消息的方法，但无济于事。有些人建议将 d-block 类放在 div 上，但是如果我这样做，验证消息将永久显示。

当表单以空值提交时，如何让验证消息显示在输入下方，如下所示：

Answer 1

The answer is to add the ValidationMessage component like this:

<div class="col-sm-6">
        <label for="firstName" class="form-label">First name</label>
        <InputText type="text" @bind-Value="CheckoutViewModel.FirstName" class="form-control" id="firstName" />
        <ValidationMessage For="@(() => CheckoutViewModel.FirstName)" />            
    </div>