How to position the browser validation message when using a Select2 component

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!How to position the browser validation message when using a Select2 component

I'm trying to replace a standard select with a Select2 in an existing form.
The form logic was written in Vanilla JS, with the client-side validation left to the browser.
select
The problem is the placement of the error message generated by the browser when I use a Select2 component:

// the Select2 component only works with JQuery objects
let $jqo = $(el);
width: "auto",
});
// making sure select2 works with the existing handlers
});
form {
width: 20rem;
}
label {
display: flex;
align-items: center;
column-gap: 1ch;
}
/* making select and Select2 occupy the remaining space */
select, .select2-container {
flex-grow: 1;
}

!-- Standard select example --!
form
p
label
Greetings:
select name="greetings" required
option hidden disabled value="" selected Select a Greetings /option
/select
/label
p
input type="submit" value="Standard select"
/form

hr

!-- Standard select replaced with a Select2 component !--
form
p
label
Greetings:
select data-is="select2" name="greetings" required
option hidden disabled value="" selected Select2 a Greetings /option
/select
/label
p
input type="submit" value="Select2 select"
/form

// the Select2 component only works with JQuery objects
let $jqo = $(el);
width: "auto",
});
// making sure select2 works with the existing handlers
});
form {
width: 20rem;
}
label {
display: flex;
align-items: center;
column-gap: 1ch;
}
/* making select and Select2 occupy the remaining space */
select, .select2-container {
flex-grow: 1;
}

!-- Standard select example --!
form
p
label
Greetings:
select name="greetings" required
option hidden disabled value="" selected Select a Greetings /option
/select
/label
p
input type="submit" value="Standard select"
/form

hr

!-- Standard select replaced with a Select2 component !--
form
p
label
Greetings:
select data-is="select2" name="greetings" required
option hidden disabled value="" selected Select2 a Greetings /option
/select
/label
p
input type="submit" value="Select2 select"
/form

// the Select2 component only works with JQuery objects
let $jqo = $(el);
width: "auto",
pSource of the question:

Question and source license information: