I am having some problems with the form validation. On some field types validation works like a charm but on others I just can't get it to work. Here is the link to a snippet.

This is the form I am trying to validate:

<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" searchable="Search here.." required>
        <option value="" disabled selected>Choose your country</option>
        <option value="1">USA</option>
        <option value="2">Germany</option>
        <option value="3">Poland</option>
      </select>
      <div class="invalid-feedback">Please select a country.</div>
    </div>
  </div>
  <div class="form-row mb-4">
    <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>
  <button class="btn btn-primary btn-rounded" type="submit">Submit form</button>
</form>

In the example I have provided all fields are mandatory. The date and select fields don't work as expected.

Here's what I have tried so far:

1. I removed the novalidate attribute from the form tag to see how html5 validation works. Validation works for all fields except date. It just skips validation on the date field. If I fill in all the other fields except date, the form gets submitted even without a value in the date field. It should not submit with a blank required field.

2. With the novalidate tag on the form bootstrap / mdb validation does not work on date and select. The select is still treated as invalid and the form is not submitted but the styling is not applied on the select field and the invalid-feedback message is not triggered.

What am I doing wrong? Why does validation not work on the date? Why is the select not being styled properly?

Please feel free to modify my snippet and add write the solution.

I tried to understand what the problem is by looking at your sample code on the supported elements section in the form validation page but the snippet does not contain md form styling. You should fix that.