<!-- Default radio -->

<div class="form-check">

  <input class="form-check-input" type="radio" name="flexRadioDefault" id="reqRadio"/>

  <label class="form-check-label" for="flexRadioDefault1"> Required </label>

</div>

​

<!-- Default checked radio -->

<div class="form-check">

  <input class="form-check-input" type="radio" name="flexRadioDefault" id="noReqRadio" checked/>

  <label class="form-check-label" for="flexRadioDefault2"> No required </label>

</div>

<form class="needs-validation" novalidate>

  <div id="noReqSelectWrapper">

  <select

    class="select"

    id="basic-select"

    data-mdb-validation="true"

    data-mdb-valid-feedback="This value is valid"

    data-mdb-invalid-feedback="This value is invalid"

    data-mdb-clear-button="true"

  >

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

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

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

    <option value="4">Four</option>

    <option value="5">Five</option>

    <option value="6">Six</option>

    <option value="7">Seven</option>

    <option value="8">Eight</option>

  </select>

  </div>

  <button type="submit" id="submit" class="btn btn-primary btn-sm mt-3">

    Submit

  </button>

</form>

​

(() => {

  'use strict';

​

  // Fetch all the forms we want to apply custom Bootstrap validation styles to

  const forms = document.querySelectorAll('.needs-validation');

​

  // Loop over them and prevent submission

  Array.prototype.slice.call(forms).forEach((form) => {

    form.addEventListener('submit', (event) => {

      event.preventDefault();

      event.stopPropagation();

​

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

    },false);

  });

  const noReqRadio = document.querySelector('#noReqRadio')

  const reqRadio = document.querySelector('#reqRadio')

const selectEl = document.querySelector('#basic-select')

​

noReqRadio.addEventListener('click', () => {

  mdb.Select.getInstance(selectEl).dispose();

  selectEl.removeAttribute('data-mdb-validation')

  const instance = new mdb.Select(selectEl);

})

reqRadio.addEventListener('click', () => {

  console.log(reqRadio.value)

  mdb.Select.getInstance(selectEl).dispose();

  selectEl.setAttribute('data-mdb-validation', 'true')

  const instance = new mdb.Select(selectEl);

})

})();

​