Bootstrap-4-Formular Validierung mit Javascript /jQuery

Ich bin neu in web-Entwicklung, und die versuche zum einrichten einer Praxis-form zu lernen, Formular-Validierung. Ich bin nach Bootstrap ist doc für Benutzerdefinierte Stile zu behandeln diejenigen, die mit Fragen der Zugänglichkeit, die Bildschirmleseprogramme verwenden und zu standardisieren die Validierung Aussehen für Benutzer in unterschiedlichen Browsern.

Ich habe ein basic-form sowie versuche zum erstellen einer JavaScript-Funktion mit jQuery behandeln die Validierung. Ich habe das Gefühl, ich bin fast da, aber noch nicht über die Validierung der Arbeit als Bootstrap-demo zeigt.

index.html

<form id="signup-form" novalidate>

  <div class="form-group">
    <h1>Sign Up</h1>
    <p>Use this form to enter your name and email to sign up.</p>
  </div>

  <!-- Name -->
  <div class="form-group">
    <div class="row">
      <div class="col">
        <label for="firstNameInput">Name</label>
        <input type="text" class="form-control" id="firstNameInput" placeholder="First name" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="col">
        <label for="lastNameInput">Last</label>
        <input type="text" class="form-control" id="lastNameInput" placeholder="Last name" required>
        <div class="valid-feedback">
          Looks good!
        </div>
      </div>
    </div>
  </div>

  <!-- Email -->
  <div class="form-group">
    <label for="emailAddressInput">Email address</label>
    <input type="email" class="form-control" id="emailAddressInput" aria-describedby="emailHelp" placeholder="[email protected]" required>
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    <div class="invalid-feedback">
      Please provide a valid email.
    </div>
  </div>

  <!-- Options -->
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="type1RadioButton" value="option1" checked>
      <label class="form-check-label" for="type1RadioButton">
        Type 1 user
      </label>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
      <label class="form-check-label" for="type2RadioButton">
        Type 2 user
      </label>
    </div>
  </div>

  <!-- Submit Button -->
  <div class="form-group">
    <a href="#" class="btn btn-primary" id="submitButton" type="submit">Submit</a>
  </div>

</form>

script.js

$(document).ready(function() {
  $("#submitButton").click(function() {

    //Fetch form to apply custom Bootstrap validation
    var form = $("#signup-form")
    //alert(form.prop('id')) //test to ensure calling form correctly

    if (form.checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    }
    form.addClass('was-validated')
  })
})

Bitte Bearbeiten Sie die Frage zu klären, was das problem ist. Was nicht funktioniert?

InformationsquelleAutor Matthew | 2018-02-14

6

Das problem ist, dass checkValidity() gibt es auf der ersten form Knoten, nicht die form.

Ändern: form.checkValidity() === false

: form[0].checkValidity() === false

- und es funktioniert: https://www.codeply.com/go/pUPBLzn6yL
```
$(document).ready(function() {
  $("#submitButton").click(function() {

    //Fetch form to apply custom Bootstrap validation
    var form = $("#signup-form")
    alert(form.prop('id')) //test to ensure calling form correctly

    if (form[0].checkValidity() === false) {
      event.preventDefault()
      event.stopPropagation()
    }
    form.addClass('was-validated');

    //Make ajax call here

  })
})
```
Mehr auf Bootstrap-4-Validierung:

Kann nicht die Validierung der Arbeit in der Bootstrap-4

danke für den Tipp auf meine Frage-format. Ich habe bemerkt, dass beim hinzufügen der radio-button, Eingänge, auch wenn Sie nicht die required Attribut, das label text Vordergrund-grün bei der Formular-Validierung. Gibt es eine Möglichkeit, führen keine überprüfung oder bypass-Validierung, stoppen Sie die radio-Taste labels " im Vordergrund-von der grün, der seit es wird nur eine von beiden Optionen (2 radio-buttons insgesamt) von denen muss man standardmäßig ausgewählt werden? Ich Frage mich nur, warum dies geschehen würde, wie es aussieht, seltsam, vor allem, wenn die required Attribut nicht gesetzt, entweder auf den radio-button input.
Das klingt wie eine separate Frage. Post eine neue Frage mit dem code-Beispiel.
Hier gepostet stackoverflow.com/questions/48815128/...

InformationsquelleAutor Zim

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.