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

  <div class="form-row">

    <div class="col-md-4 mb-3 md-form">

      <label for="validationCustom012">First name</label>

      <input type="text" class="form-control" id="validationCustom012" value="" required>

      <div class="invalid-feedback">Nope!</div>

    </div>

    <div class="col-md-4 mb-3 md-form">

      <input type="text" name="date" id="date" class="form-control datepicker" value="" required/>

      <label for="date">Date</label>

      <div class="invalid-feedback">Please select a valid date.</div>

    </div>

    <div class="col-md-4 mb-3">

      <select class="mdb-select md-form" required searchable="Search here..">

        <option value="1">USA</option>

        <option value="2">Germany</option>

        <option value="3" selected>Poland</option>

      </select>

      <label class="mdb-main-label">Country</label>

      <div class="invalid-feedback check1">Please select a country.</div>

    </div>

  </div>

  <div class="form-row mb-4">

    <div class="col-md-4 mb-3">

      <div class="form-check pl-0">

        <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>

        <label class="form-check-label" for="invalidCheck2">Agree to terms and conditions</label>

        <div class="invalid-feedback">You shall not pass!</div>

      </div>

    </div>

    <div class="col-md-4 mb-3">

      <select class="mdb-select md-form" searchable="Search here..">

        <option value="1">USA</option>

        <option value="2">Germany</option>

        <option value="3">Poland</option>

      </select>

      <label class="mdb-main-label">Country</label>

    </div>

  </div>

  <button class="btn btn-primary btn-rounded" type="submit">Submit form</button>

</form>

​

(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) {

        $('.check1').css("display","none");

        if($('.dropdown-content li.selected').length===0){

          $('.check1').css("display","block");

        }

​

        if (form.checkValidity() === false) {

          event.preventDefault();

          event.stopPropagation();

        }

        form.classList.add('was-validated');

      }, false);

    });

  }, false);

})();

​

$(document).ready(function() {

    $('.mdb-select').materialSelect();                                        // Initialize material styling for select dropdown

    $('.datepicker').pickadate();                                             // Initialize datepicker

    $('.timepicker').pickatime({ twelvehour: true,});

  // Initialize timepicker

    $('.select-wrapper').click(function(){

      $('.check1').css("display","none");

    })

  $('.datepicker').removeAttr('readonly');

  $('.mdb-select.select-wrapper .select-dropdown').removeAttr('readonly').prop('required', true).addClass('form-control');

});