Bootstrap 4 Formular-Validierung

Question

Ich begginning mit Bootstrap und ich habe eine Menge von Bootstrap-3 Formularvalidierung Plugins etc gesehen ... Aber ich habe nicht für Bootstrap 4.

Ich versuche zu finden mehr Formen validieren, sondern hier ist mein Kontaktformular nur um zu sehen:

<!-- 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:lorem@ipsum.com"> 
       <h4 id="mail">lorem@ipsum.com</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, bestehende js zu ändern, aber nichts concluent.

hier ist die gerenderte Form:

jsfiddle of the form

Answer 1

Zuerst habe ich mein Problem mit einer externen Bibliothek gelöst wie Jonathan Dion vorgeschlagen. Aber vor kurzem stieß ich auf diese:

Bootstrap v4.0 führte ihre eigene Formular-Validierung, die Sie noch mit Back-End-PHP-Validierung paaren können. Vom 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 JS mit:

<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 liefert Eingang Grenze farbgebenden und zeigt die gültigen/ungültigen Feedback Blöcke entsprechend dem vorgegebenen Muster oder Eigenschaften. Sie wird über die beiden Pseudoklassen :invalid und :valid von CSS angewendet. Es gilt für <input>, <select> und <textarea> Elemente.

Answer 2

Sie jede Bibliothek im Internet verfügbar nutzen können. Sie können versuchen jqueryvalidation. Es ist ziemlich einfach zu bedienen, lesen Sie einfach die Dokumentation.

Fügen Sie das required Attribut auf Ihrem input hinzu und jqueryvalidation erledigt die Aufgabe. Für das Styling können Sie Ihr eigenes CSS hinzufügen und es wie Bootstrap aussehen lassen.

Hofft es

helfen

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

Demo