Can't manage to get validation right


I use Bootstrap v4.6, jQuery 3.6, select2.full.min.js 4.0.13, select2-bootstrap-theme (here) and I have form inputs which validates perfectly using checkValidity() (I followed bootstrap doc).
BUT even if my select2 has ‘required’ option, it seems always validated, even if nothing is selected.
I couldn’t find a working example code so my last chance is to post a question here, hoping for some help :slight_smile:

Here is an excerpt from html code :

<form id="form_ajouter" class="needs-validation">
<div class="row">
<div class="col-6">
    <div class="form-group">       
      <label for="nom" class="control-label">Nom</label>
      <input name="nom" type="text" class="form-control" id="nom" placeholder="Nom" required>
      <div class="invalid-feedback">Ceci est obligatoire.</div>
<div class="col-6">
    <div class="form-group"> 
        <label for="option" class="control-label">option</label>
        <div style="width:100%;">
            <select name="option" id="option" class="form-control select2" style="width:100%;" required>
                <option value='1'>item1</option>
                <option value='2'>item2</option>
                <option value='3'>item3</option>
            <div class="invalid-feedback">Ceci est obligatoire</div>

And here is my jQuery code (I want to validate the form when I click on a button named ‘ajouter’) :

$(document).ready(function() {

$(".select2").select2({theme: 'bootstrap4'});

$('button[name="ajouter"]').on('click', function(event, state) {
var form = $("#form_ajouter")[0];
var isValid = form.checkValidity();
if (!isValid) {
return; // only for tests of course


When I click on the “ajouter” button, invalid inputs are red and help text is displayed, BUT a green border appears on the select2 where nothing is selected… That’s a problem…

Could you help me please ? Would you have a working code example using checkValidity ?

Thanks in advance for your help,