webentwicklung-frage-antwort-db.com.de

Bootstrap 4 Formularvalidierung

Ich bin ein Anfänger von Bootstrap und habe schon viele Bootstrap 3-Formulierungs-Plugins usw. gesehen, aber ich habe keine für Bootstrap 4 gefunden.

Ich versuche, mehrere Formulare zu überprüfen, und hier ist mein Code:

<!-- Contact -->
<div class="container white">
  <div class="row">
    <div class="container white percent100">
      <div class="col-lg-12">
        <div class="padder-t2">
          <h1>Contact</h1>
          <div class="horiz-divider"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row padder-t padder-b">
    <div class="container white">
      <div class="col-lg-12">
        <!-- Form -->
        <form class="form-horizontal" action=" " method="post" id="contact_form">
          <fieldset>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>First Name</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input id="firstname" name="firstname" placeholder="First Name" class="form-control" type="text">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>Last Name</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input id="lastname" name="lastname" placeholder="Last Name" class="form-control" type="text">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>E-Mail</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                    <input id="email" name="email" placeholder="E-Mail Address" class="form-control" type="email">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text input-->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>Phone #</h4></label>
                </div>
                <div class="col-md-4 col-lg-4 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                    <input id="phone" name="phone" placeholder="Phone" class="form-control" type="text">
                  </div>
                </div>
              </div>
            </div>
            <!-- Text area -->
            <div class="form-group">
              <div class="row">
                <div class="col-md-4 col-lg-4">
                  <label class="control-label pull-right"><h4>Message</h4></label>
                </div>
                <div class="col-md-4 col-lg-5 inputGroupContainer">
                  <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                    <textarea id="comment" class="form-control" name="comment" placeholder="Your Message"></textarea>
                  </div>
                </div>
              </div>
            </div>
            <!-- Success message -->
            <div class="alert alert-success" role="alert" id="success_message">Success <i class="fa fa-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>
            <!-- Button -->
            <div class="form-group">
              <div class="row">
                <label class="col-md-4 col-lg-4 control-label"></label>
                <div class="col-md-4 col-lg-4">
                  <button type="submit" class="btn btn-danger raised">Send <i class="fa fa-paper-plane"></i></button>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <div class="row padder-b">
    <div class="row col-lg-12">
      <div class="col-md-3 col-lg-3"></div>
      <h4 class="col-md-9 col-lg-9">Contact us directly:</h4>
    </div>
    <div class="row col-lg-12">
      <div class="col-md-3 col-lg-3"></div>
      <h4 class="col-md-2 col-lg-2 padder-lr">Mail:</h4>
      <a class="col-md-6 col-lg-6 padder-lr" href="mailto:[email protected]">
        <h4 id="mail">[email protected]</h4>
      </a>
    </div>
    <div class="row col-lg-12">
      <div class="col-md-3 col-lg-3"></div>
      <h4 class="col-md-2 col-lg-2 padder-lr">Adress:</h4>
      <h4 class="col-md-6 col-lg-6 padder-lr" id="adress">2 LoremIpsum Road, 67000 City - Country</h4>
    </div>
  </div>
</div>

Ich habe versucht, vorhandene Js zu modifizieren, hatte aber kein Glück.

Hier ist die gerenderte Form:

jsfiddle der Form

3
Cédric MEYER

Zuerst löste ich mein Problem mit einer externen Bibliothek, wie Jonathan Dion vorgeschlagen. Aber kürzlich bin ich darauf gestoßen:

Bootstrap v4.0 führte eine eigene Formularvalidierung ein, die Sie weiterhin mit der PHP-Validierung des Backends koppeln können. Aus dem Doc :

<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        Doesn't look good!
      </div>
    </div>
  </div>
</div>

Dann mit JS:

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Dies ermöglicht eine Einfärbung der Eingaberänder und zeigt die gültigen/ungültigen Rückmeldungsblöcke gemäß dem angegebenen Muster oder den angegebenen Eigenschaften an. Die Anwendung erfolgt über die beiden Pseudoklassen von CSS, :invalid und :valid. Sie gilt für die Elemente <input>, <select> und <textarea>.

4
Cédric MEYER

Sie können jede im Web verfügbare Bibliothek verwenden. Sie können versuchen, Jqueryvalidation . Es ist ziemlich einfach zu bedienen, lesen Sie einfach die Dokumentation.

Fügen Sie das required-Attribut zu Ihrer input hinzu und Jqueryvalidation erledigt den Job. Für das Styling können Sie Ihr eigenes CSS hinzufügen und es wie Bootstrap aussehen lassen.

Hoffentlich hilft es

$(document).ready(function(){
 $('#contact_form').validate()
})

Demo

3
Jonathan Dion

Hier ist keine Bibliothek erforderlich, Sie können die native reportValidation()-Methode verwenden: MDN Sie können es auf einzelnen Eingaben oder auf dem gesamten Formular selbst aufrufen.

0
Abraham Brookes

Ich habe gerade herausgefunden, warum mein Code nicht gültig war: Ich hatte keine Schaltfläche zum Senden, um die Überprüfung auszulösen. Stellen Sie sicher, dass Sie es haben.

<button type="submit" class="btn btn-primary">Save</button>
0
phoenix