How to add 'is-invalid' class on choices.js

Question

I am currently using validate.js to validate my form and choices.min.js as a substitute instead of using select in order for me to have a proper search bar on select. I am currently testing the choices.min.js my problem is the error message as well as the error class which is is-invalid is not adding or displaying. Kindly refer to this screenshot:

Here is my the html code:

<div class="form-group mb-3">
<div class="choices" data-type="select-one" tabindex="0" role="listbox" aria-haspopup="true" aria-expanded="false">
<div class="choices__inner">
<select class="form-control choices__input" data-trigger="" name="choices_single_default" id="choices_single_default" hidden="" tabindex="-1" data-choice="active">
    <option value="" data-custom-properties="[object Object]">--</option>
</select>
  <div class="choices__list choices__list--single">
    <div class="choices__item choices__placeholder choices__item--selectable" data-item="" data-id="1" data-value="" data-custom-properties="[object Object]" aria-selected="true">--</div>
  </div>
</div>
<div class="choices__list choices__list--dropdown" aria-expanded="false">
  <div class="choices__list" role="listbox">
    <div id="choices--choices_single_default-item-choice-1" class="choices__item choices__item--choice is-selected choices__placeholder choices__item--selectable is-highlighted" role="option" data-choice="" data-id="1" data-value="" data-select-text="" data-choice-selectable="" aria-selected="true">--</div>
    <div id="choices--choices_single_default-item-choice-2" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="2" data-value="Choice 1" data-select-text="" data-choice-selectable="">Choice 1</div>
    <div id="choices--choices_single_default-item-choice-3" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="3" data-value="Choice 2" data-select-text="" data-choice-selectable="">Choice 2</div>
    <div id="choices--choices_single_default-item-choice-4" class="choices__item choices__item--choice choices__item--selectable" role="option" data-choice="" data-id="4" data-value="Choice 3" data-select-text="" data-choice-selectable="">Choice 3</div>
  </div>
</div>

Here is my javascript code:

$('#signin-form').validate({
rules: {
  email: {
    required: true,
    email: true
  },
  choices_single_default: {
    required: true,
  },
  password: {
    required: true
  }
},
messages: {
  email: {
    required: 'Please enter your email address',
    email: 'Please enter a valid email address'
  },
  choices_single_default: {
    required: 'Please enter your choice'
  },
  password: {
    required: 'Please enter your password'
  }
},
errorPlacement: function(error, element) {
  if (element.parent('.input-group').length) {
      error.insertAfter(element.parent());
  } else if (element.hasClass('choices__input')) {
      error.insertAfter(element.siblings('.choices__list--dropdown'));
  } else {
      error.insertAfter(element);
  }
},
highlight: function(element) {
    if ($(element).hasClass('choices__input')) {
        $(element).siblings('.choices__list--dropdown').addClass('is-invalid');
    } else {
        $(element).addClass('is-invalid');
    }
},
unhighlight: function(element) {
    if ($(element).hasClass('choices__input')) {
        $(element).siblings('.choices__list--dropdown').removeClass('is-invalid');
    } else {
        $(element).removeClass('is-invalid');
    }
},
submitHandler: function(form) {
  // ajax code

  return false;
}
});

I have tried to use chat GPT to fix my problem but to no avail. I tried to read the documentation still not working.

Answer 1

You wrote in one of your post above "I checked there were limitations with choices.js that is why I opted for select2 instead". Because you did not delete your post, I will still answer your question if others are still looking for an answer.

You can use the choices instance to add a class to .containerInner.element. In this example we add our own css class called .is-invalid.

You can of course also use the function below to display the message when no option has been selected.

We also use the choices passedElement.element.addEventListener so that if the user does select an option, we can remove the is_invalid class.

Example:

const mychoices = new Choices(document.querySelector('#mychoices'));
mychoices.passedElement.element.addEventListener('change', function() {
  checkInputfield(mychoices);
});

$(document).on('click', '.submit_data', function() {
  checkInputfield(mychoices);
});

function checkInputfield(my_choices) {
  let inner_element = my_choices.containerInner.element;
  if (my_choices.getValue(true)) {
    inner_element.classList.remove('is-invalid');
  } else {
    inner_element.classList.add('is-invalid');
  }
}

.is-invalid {
  border: 1px solid #dc3545 !important;
}

.is-invalid::after {
  position: absolute;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: "\f06a";
  color: #dc3545;
  font-size: 20px;
  right: 40px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://choices-js.github.io/Choices/assets/styles/choices.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/9.1.0/choices.min.js"></script>

<div class="row justify-content-center mt-3">
  <div class="col-6">
    <label for="mychoices" class="form-label">Select an option</label>
    <select id="mychoices" class="form-control choices-single">
      <option value="" hidden>Make a choice...</option>
      <option value="1">Option A</option>
      <option value="2">Option B</option>
      <option value="3">Option C</option>
      <option value="4">Option D</option>
    </select>
    <div>
      <div>
        <button type="button" class="submit_data btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>