Bootstrap 4 Form Validation

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

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.