Warum ist Bootstrap 4 Beta .ungültig-feedback anzeigen, wenn das Feld gültig?

Ich habe ein Formular, dass ich mit mit Bootstrap 4 beta Formular-Validierung. Es funktioniert gut, außer für die invalid-feedback Klasse. Die feedback-div korrekt angezeigt, zuerst etwa so:

Aber wenn ich das Feld gültig ist, wird das Feld grün markiert, aber die invalid-feedback div ist nicht versteckt.

Warum ist Bootstrap 4 Beta .ungültig-feedback anzeigen, wenn das Feld gültig?

Folgte ich den HTML-Code als in docs:

<form name="signup" id="needs-validation" novalidate>
  <h1 class="text-center">Signup</h1>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name" maxlength="255" v-model="user.name" required>
    <small class="text-muted">Your full legal name.</small>
    <div class="invalid-feedback">
      Please enter your name.
    </div>
  </div>
...

Wenn der Benutzer das Formular sendet, die unter JavaScript-Funktion ausgeführt wird.

signup () {
  let form = document.getElementById('needs-validation')

  if (form.checkValidity()) {
    axios.post('http://localhost:3000/accounts', this.user).then(response => {
      console.log(response)
    }).catch(error => {
      console.log(error)
    })
  }

  form.classList.add('was-validated')
}

Und die form ist in der Tat gültig, im Bild oben, und die POST passiert ist, aber das feedback der text ist immer noch sichtbar...

InformationsquelleAutor rosendin | 2017-09-23

bootstrap-4

1

Ich bin mit dem gleichen Problem. Es ist anscheinend ein bekannter bug mit BS 4.0.0 beta nach dieses Problem Bootstrap auf der GitHub Issue Tracker.

Es ist bereits ein patch zusammengeführt, es wird aber nur freigesetzt werden, die zusammen mit der zweiten beta, die wird wohl einige Wochen dauern.

In der Zwischenzeit können Sie das Update anwenden, das sich auf die Mixins in Verbindung/_form.scss-Datei, oder wenn Sie bevorzugen, oder benötigen Sie einfach überschreiben Sie die falsche Regel können Sie dies tun:
```
.was-validated .form-control:valid ~ .invalid-feedback,
.was-validated .form-control:valid ~ .invalid-tooltip,
.form-control.is-valid ~ .invalid-feedback,
.form-control.is-valid ~ .invalid-tooltip,
.was-validated .custom-select:valid ~ .invalid-feedback,
.was-validated .custom-select:valid ~ .invalid-tooltip,
.custom-select.is-valid ~ .invalid-feedback,
.custom-select.is-valid ~ .invalid-tooltip {
  display: none;
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip,
.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip,
.was-validated .custom-select:valid ~ .valid-feedback,
.was-validated .custom-select:valid ~ .valid-tooltip,
.custom-select.is-valid ~ .valid-feedback,
.custom-select.is-valid ~ .valid-tooltip {
  display: block;
}
```
Die erste Regel außer Kraft setzen und sicherstellen, dass die ungültige Zeug bleibt verborgen, wenn die Eingabe gültig ist, und die zweite Regel zeigt die gültige feedback und tooltips, wenn die Eingabe gültig ist.

Bitte beachten Sie, dass diese Monstrosität von CSS kommt direkt von der kompilierte Bootstrap von Ihrem CDN, können Sie immer entfernen Sie die Selektoren, die Sie nicht verwenden, um diese kleineren, aber der beste Weg ist immer das Bearbeiten der Quelle SASS-Dateien. Ich musste es so machen, denn ich bin mit der CDN und haben nur die minified CSS zu arbeiten.

InformationsquelleAutor Rodrigo Castro

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.