Wie funktioniert ist-ungültig bootstrap-Klasse der Arbeit?

Habe ich eine Eingabe, die korrekt funktioniert: nach errror zurückgegeben wurde, vom server auf den client, sehe ich {{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>

Also ich denke, div mit class="invalid-feedback" geht aus display: none zu display: block nur, wenn div die class="invalid-feedback" auf derselben DOM-Ebene mit <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>

Bin ich im Recht? Nicht gefunden, was in docs über DOM.

Wenn ja, welche Abhilfe ist geeignet für den Fall, wenn ich möchte zeigen Fehler in div mit class="invalid-feedback", aber "verbunden" - Eingang ist nicht auf derselben DOM-Ebene? Eigentlich will ich machen, mein 2. Beispiel Arbeit.

UPDATE: kann ich hinzufügen, einige <div class="form-control" :class="{' is-invalid': errors.foo}" style="display: none;"> auf derselben DOM-Ebene, wo <div class="invalid-feedback"> ist, aber es wäre spaghetti-code.

  • Ich verstehe es nicht. Können Sie das klären, ist die Frage? Hast du Lesen Sie die überprüfung Abschnitt in der Dokumentation?
  • Ich habe eine Vue-Komponente, mit der form. Es ist ein nicht-html-tag in form, die verwendet wird, für das Bilder freistellen. Tag machen einige <canvas>, <input> und andere Elemente. Ich will den Fehler anzeigen, wenn Benutzer versucht, ein Formular Einreichen, ohne ein Bild angehängt. Ich habe versucht, hinzufügen class="form-control" :class="{' is-invalid': errors.foo}" auf meine Eingabe, aber Fehler in <div class="invalid-feedback" v-if="errors.foo"> nicht zeigen, trotzdem
  • JSFiddle
  • Wenn es nicht zeigen, bis, was ist der Wert errors.screenshot?
  • es ist ein string. Aber trotzdem div mit invalid-feedback will nicht gehen "sichtbar".
  • Ich denke, das ist, wo ein Elternteil mit .was-validated notwendig ist.
  • Ich versuche im moment. Aber ich habe eine text-Eingabe in der Nähe, wie das und es funktioniert ohne Zugabe von .was-validated...
  • Du hast Recht, es ist ein Praktikum erforderlich, wenn die Platzierung der feedback-div. Ich aktualisiert meine Antwort mit weiteren Infos

InformationsquelleAutor Tarasovych | 2018-04-09
  1. 3

    Bist du mit v-if="errors.foo" auf die invalid-feedback div, so wird es eingefügt in den DOM nur, wenn errors.foo ist truthy, unabhängig davon, wo es in den DOM.

    Da für das styling:

    HTML-Formular-Validierung angewendet wird per CSS die beiden pseudo-Klassen :invalid und :valid. Es gilt zu <input>, <select>, und <textarea> Elemente.

    Also die Platzierung der .invalid-feedback div ist wichtig bei Verwendung des Standard-Verhalten, die für das styling mit dem general sibling combinator ~

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

    Es ist ein .was-validated Klasse, die Sie hinzufügen sollten, auf ein übergeordnetes element, das anwenden der Fehler-styling ungültigen Elementen.

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

    Da muss es ein Allgemeinen Geschwister, die Sie zwingen könnte die display: block mit v-show oder verwenden Sie benutzerdefinierte CSS wie d-block.

    Als fallback, .is-invalid und .is-valid Klassen können verwendet werden, anstelle der pseudo-Klassen für die server-seitige Validierung. Sie nicht verlangen, eine .was-validated übergeordneten Klasse.

    Dies ist ein bekanntes problem mit .input-group diskutiert in einer Ausgabe.

    Wenn Sie feststellen, es beginnt zu schmutzig, können Sie bewerten die Möglichkeit, die Verpackung der Eingänge in Komponenten, die für Ihr styling und dann nur die Wiederverwendung Ihrer Komponenten.

    Oder verwenden Sie eine Vue-wrapper bootstrap, wie bootstrap-vue.

    • Ja, ein Weg dies zu erreichen ist noch hinzuzufügen d-block zu invalid-feedback. Lassen Sie einfach diesen link für zukünftige Besucher. Machen has-error wieder großartig.
    InformationsquelleAutor Emile Bergeron
Schreibe einen Kommentar