Bootstrap 4 form validation - Advanced

Bootstrap 4 supports extraordinary ways to validate your form using the charismatic Tooltips. It also supports both .valid and .invalid feedback as well. For custom validation, you'll need to include  novalidate attribute in your form like below,

<form class="needs-validation" novalidate>
</form>

The .valid-tooltip class is used to display the valid feedback message. For invalid feedback message, you'll simply have to include .invalid-tooltip class. Lets see an example,

<div class="container">
  <h3>
    <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" target="_blank">BOOTSTRAP 4 FORM VALIDATION - ADVANCED</a></h3>
  <a href="https://primestudyhub.blogspot.com/search/label/Bootstrap%204" target="_blank">Learn More</a>
<form class="needs-validation"  novalidate>
<div class="form-row">
  <div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">Name</div>
    </div>
    <input type="text" class="form-control" id="Name" placeholder="Enter Name" required>
  <div class="valid-tooltip">
        great!
      </div>
    <div class="invalid-tooltip">
          Please enter name
        </div>
  </div>
<div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">Email</div>
    </div>
    <input type="email" class="form-control" id="Email" placeholder="Enter Email" required>
  <div class="valid-tooltip">
        great!
      </div>
  <div class="invalid-tooltip">
          Please enter email
        </div>
  </div>
  </div>
  <div class="form-row">
     <div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">Mobile</div>
    </div>
    <input type="number" class="form-control" id="Mobile" placeholder="Enter Mobile" required>
  <div class="valid-tooltip">
        great!
      </div>
       <div class="invalid-tooltip">
          Please enter mobile
        </div>
  </div>
<div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">Gender</div>
    </div>
    <select class="custom-select" required>
      <option value="">- Select Gender -</option>
      <option value="1">Male</option>
      <option value="2">Female</option>
  </select>
  <div class="valid-tooltip">
        great!
      </div>
  <div class="invalid-tooltip">
          Please select gender
        </div>
  </div>
  </div>
  <div class="form-row">
         <div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">DOB</div>
    </div>
<input type="date" name="bday" max="3000-12-31" min="1000-01-01" class="form-control" required>
  <div class="valid-tooltip">
        great!
           </div>
           <div class="invalid-tooltip">
          Please select dob
        </div>
  </div>
         <div class="input-group col-md-4 mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">City</div>
    </div>
    <input type="text" class="form-control" id="City" placeholder="Enter City" required>
  <div class="valid-tooltip">
        great!
      </div>
           <div class="invalid-tooltip">
          Please enter city
        </div>
  </div>
  </div>
  <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </form>
</div>

Include JS:

(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);
})();

Demo

See the Pen BOOTSTRAP 4 FORM VALIDATION - ADVANCED by Prime Study Hub (@PrimeStudyHub) on CodePen.

If you would like to learn more about the latest bootstrap information click here.

NEXT STEPS...

Increase your form identity by following the steps outlined above. Ask questions & get feedback on your work by using the below comment section effectively.