Le message de validation Bootstrap 5 ne s'affiche pas

Question

<EditForm Model="CheckoutViewModel" OnValidSubmit="@HandleValidSubmit" id="formulaire de paiement" class="nécessite une validation" novalidate="novalidate">
    <DataAnnotationsValidator />

    <div class="ligne g-3">

        <div class="col-sm-6">
            <label for="prénom" class="form-label">Prénom</label>
            <InputText type="texte" @bind-Value="CheckoutViewModel.FirsName" class = "form-control" id="prénom" />
            <div class="invalid-feedback">
                Un prénom valide est requis.
            </div>
            <div data-lastpass-icon-root="true" style="position: relative !important; hauteur : 0px !important; largeur : 0px !important; float: gauche !important;"></div>
        </div>

        <div class="col-sm-6">
            <label for="nom de famille" class="form-label">Nom</label>
            <InputText type="texte" @bind-Value="CheckoutViewModel.LastName" class = "form-control" id="nom de famille" />
            <div class="invalid-feedback">
                Un nom de famille valide est requis.
            </div>
        </div>

    </div>

    <hr class="mon-4">

    <id du bouton ="soumettre" class = "w-100 btn btn-primaire btn-lg" type="soumettre">Effectuer un paiement sécurisé</bouton>

</EditForm>

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

Answer 1

La réponse est d'ajouter le composant ValidationMessage comme ceci :

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