Bootstrap 4 Form Validation

Question

I'm a beginner with bootstrap and I have seen a lot of bootstrap 3 form validation plugins etc, but I haven't found any for bootstrap 4.

I'm trying to validate multiple forms, and here is my 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>

I have tried to modify existing js, but I had no luck.

Here is the rendered form:

jsfiddle of the form

Answer 1

Update 2020 - Bootstrap 4.4.x

Here's another option (modern JS) if you want to validate each input one at a time (live or real-time) instead of waiting for the entire form to be submitted...

(function() {
  'use strict';
  window.addEventListener('load', function() {
    // fetch all the forms we want to apply custom style
    var inputs = document.getElementsByClassName('form-control')

    // loop over each input and watch blur event
    var validation = Array.prototype.filter.call(inputs, function(input) {

      input.addEventListener('blur', function(event) {
        // reset
        input.classList.remove('is-invalid')
        input.classList.remove('is-valid')

        if (input.checkValidity() === false) {
            input.classList.add('is-invalid')
        }
        else {
            input.classList.add('is-valid')
        }
      }, false);
    });
  }, false);
})()

<form class="container" novalidate="" action="/echo" method="POST" id="myForm">
    <div class="form-group">
        <label class="form-control-label" for="input1">Enter some input</label>
        <input type="text" class="form-control" name="input1" id="input1" 
            autocomplete="no" required>
        <div class="valid-feedback">Success! You've done it.</div>
        <div class="invalid-feedback">No, you missed this one.</div>
    </div>
    <div class="form-group">
        <label class="form-control-label" for="input2">Enter password</label>
        <input type="text" class="form-control" 
            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$" 
            autocomplete="no" name="input2" id="input2">
        <div class="valid-feedback">Nice! You got this one!</div>
        <div class="invalid-feedback">At least 6 chars: 1 uppercase, 1 lowercase and numeric</div>
    </div>
    <div>
        <button type="submit" class="btn btn-secondary" id="btnSubmit">Submit</button>
    </div>
</form>

https://codeply.com/p/mzBNbAlOvQ

Answer 2

First I solved my issue with an external library like Jonathan Dion suggested. But recently I came across this :

Bootstrap v4.0 introduced their own form validation that you can still pair with backend php validation. From the 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>

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

This provides input border colorating and displays the valid / invalid feedback blocks according to the given pattern or properties. It is applied via CSS’s two pseudo-classes, :invalid and :valid. It applies to <input>, <select>, and <textarea> elements.

Answer 3

You can use any library available on the web. You may try jqueryvalidation. It's pretty easy to use, just read the documentation.

Add the required attribute on your input and jqueryvalidation will do the job. For styling, you can add your own CSS and make it look like bootstrap.

Hopes it help

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

Demo