Bootstrap 5-Validierungsmeldung wird nicht angezeigt

Question

我有一个使用 Bootstrap 5.1.0 的 Blazor 网页,其形式如下,验证纯粹是客户端:

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

    <div class="row g-3">

        <div class="col-sm-6">
            <label for="firstName" class="form-label">Vorname</label>
            <InputText type="text" @bind-Value="CheckoutViewModel.FirsName" class="form-control" id="Vorname" />
            <div class="invalid-feedback">
                Ein gültiger Vorname ist erforderlich.
            </div>
            <div data-lastpass-icon-root="true" style="Position: relativ !important; Höhe: 0px !important; Breite: 0px !important; float: left !important;"></div>
        </div>

        <div class="col-sm-6">
            <label for="lastName" class="form-label">Nachname</label>
            <InputText type="text" @bind-Value="CheckoutViewModel.LastName" class="form-control" id="Nachname" />
            <div class="invalid-feedback">
                Ein gültiger Nachname ist erforderlich.
            </div>
        </div>

    </div>

    <hr class="my-4">

    <button id="senden" class="w-100 btn btn-primary btn-lg" type="submit">Sichere Zahlung durchführen</button>

</EditForm>

在 div 上,但是如果我这样做,验证消息将永久显示.< /p>

Answer 1

答案是添加 ValidationMessage 组件，如下所示：

<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>