web-dev-qa-db-fra.com

Comment fonctionne la classe is-invalid bootstrap?

J'ai une entrée qui fonctionne correctement: après que l'erreur a été renvoyée du serveur au client, je vois {{value}}.

<div class="form-group">
    <label class="col-md-8 control-label">Foo</label>
    <input class="form-control" v-model="foo" :class="{' is-invalid': errors.foo}">
    <div class="invalid-feedback" v-if="errors.foo">
        <strong v-for="value in errors.foo">{{value}}</strong>
    </div>
</div>

Donc je suppose que div avec class="invalid-feedback" va de display: none à display: block uniquement lorsque div qui a class="invalid-feedback" est au même niveau DOM avec <input class="form-control is-invalid">.

<div>
    <input class="form-control" :class="{' is-invalid': errors.foo}">
    <div class="invalid-feedback" v-if="errors.foo">
        <!-- this example would work -->
    </div>
</div>

<div>
    <input class="form-control" :class="{' is-invalid': errors.foo}">
</div>
<div>
    <div class="invalid-feedback" v-if="errors.foo">
        <!-- this example would not work
             because error div isn't on the same DOM level with input -->
    </div>
</div>

Ai-je raison? Je n'ai rien trouvé dans docs à propos de DOM.

Si oui, quelle solution de contournement convient au cas où je veux afficher une erreur à l'intérieur de div avec class="invalid-feedback", mais l'entrée "connectée" n'est pas au même niveau DOM? En fait, je veux faire fonctionner mon 2ème exemple.

MISE À JOUR: Je peux ajouter quelques <div class="form-control" :class="{' is-invalid': errors.foo}" style="display: none;"> au même niveau DOM où <div class="invalid-feedback"> oui, mais ce serait du code spaghetti.

htmlvue.jsbootstrap-4
4
Tarasovych

Vous utilisez v-if="errors.foo" sur le invalid-feedback div, il sera donc inséré dans le DOM uniquement lorsque errors.foo est véridique, peu importe où il se trouve dans le DOM.

Quant au style:

La validation des formulaires HTML est appliquée via les deux pseudo-classes CSS, :invalid et :valid. Cela s'applique à <input>, <select>, et <textarea> éléments.

Ainsi, le placement du .invalid-feedback div est important lorsque vous utilisez le comportement par défaut , qui applique le style avec le combinateur général frère ~

.was-validated .form-control:invalid~.invalid-feedback {/*...*/}

Il y a un .was-validated classe que vous devez ajouter sur un élément parent qui appliquera le style d'erreur sur les éléments invalides.

<div :class="{'was-validated': errors.foo}">
    <input class="form-control" :class="{' is-invalid': errors.foo}">
</div>
...
<div :class="{'was-validated': errors.foo}">
    <div class="invalid-feedback" v-show="errors.foo">...</div>
</div>

Comme il doit s'agir d'un frère général, vous pouvez forcer le display: block avec v-show ou utilisez un CSS personnalisé comme d-block .

Comme solution de rechange, .is-invalid et .is-valid les classes peuvent être utilisées à la place des pseudo-classes pour la validation côté serveur. Ils ne nécessitent pas de .was-validated classe parent.

Il s'agit d'un problème connu avec .input-group discuté dans un numéro .

Si vous trouvez que ça commence à devenir désordonné, vous pouvez évaluer la possibilité d'encapsuler les entrées dans des composants qui appliquent votre style, puis de réutiliser simplement vos composants.

Ou vous pouvez utiliser un wrapper Vue de bootstrap, comme bootstrap-vue .

4
Emile Bergeron