FormValidation - Select2 Validation State
Hi, I am using Metronic v8.1.8 and I want my select2 to display something like the one from this sample Select2 Validation State.
Here's the Form Validation that I am following, it already displays the validation message but not the validation state, I have already updated the js code below:
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: ".fv-row",
eleInvalidClass: "is-invalid",
eleValidClass: "is-valid"
})
}It works for Text Input but not for Select2
Replies (9)
By the way here's my HTML Code:
<!--begin::Input group--->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="required form-label fs-6 mb-2">Select2 Input</label>
<!--end::Label-->
<!--begin::Select2-->
<select class="form-select" name="cbTest[]" data-control="select2" data-placeholder="Select an option">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<!--begin::Select2-->
</div>Here's the HTML Code from the browser before validation:
<div class="fv-row mb-10 fv-plugins-icon-container">
<!--begin::Label-->
<label class="required form-label fs-6 mb-2">Select2 Input</label>
<!--end::Label-->
<!--begin::Select2-->
<select class="form-select select2-hidden-accessible" name="cbTest[]" data-control="select2" data-placeholder="Select an option" data-select2- tabindex="-1" aria-hidden="true" data-kt-initialized="1">
<option data-select2-></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select><span class="select2 select2-container select2-container--bootstrap5" dir="ltr" data-select2- ><span class="selection"><span class="select2-selection select2-selection--single form-select" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-cbTest-container" aria-controls="select2-cbTest-container"><span class="select2-selection__rendered" role="textbox" aria-readonly="true" title="Select an option"><span class="select2-selection__placeholder">Select an option</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
<!--begin::Select2-->
<div class="fv-plugins-message-container invalid-feedback"></div></div>Here's after validation:
<div class="fv-row mb-10 fv-plugins-icon-container fv-plugins-bootstrap5-row-invalid">
<!--begin::Label-->
<label class="required form-label fs-6 mb-2">Select2 Input</label>
<!--end::Label-->
<!--begin::Select2-->
<select class="form-select select2-hidden-accessible is-invalid" name="cbTest[]" data-control="select2" data-placeholder="Select an option" data-select2- tabindex="-1" aria-hidden="true" data-kt-initialized="1">
<option data-select2-></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select><span class="select2 select2-container select2-container--bootstrap5" dir="ltr" data-select2- ><span class="selection"><span class="select2-selection select2-selection--single form-select" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-disabled="false" aria-labelledby="select2-cbTest-container" aria-controls="select2-cbTest-container"><span class="select2-selection__rendered" role="textbox" aria-readonly="true" title="Select an option"><span class="select2-selection__placeholder">Select an option</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
<!--begin::Select2-->
<div class="fv-plugins-message-container invalid-feedback"><div data-field="cbTest[]" data-validator="notEmpty">Test is Required</div></div></div>
Hi,
Please note that the icon-based validation states are not supported for the custom select2 plugin due to some technical limitations for customizing Select2. With custom plugins such as Select2, Tagify, etc you can use only border highlighted validate state style.
Regards.
But what is the use/purpose of showing it in this example: https://preview.keenthemes.com/html/craft/docs/forms/select2#validation-states?
Hi,
It was just an example but it has some limitations. For example, if the Select2 control has a cancel button it conflicts with the icon.
So at the moment, we recommend using basic validation states(without icons) as it works best for all standard and 3rd-party plugin(datepickjer, tagify, select2, flatpickr, etc) inputs as well.
Regards.
But how can I display it using FormValidation? It is OK even if it displays behind the cancel button as long as I can display the validation icon.
Hi,
Sure, we will try to help you with this.
To make this work need to find a way to integrate Formvalidation and Bootstrap with Select2. We will try to implement it and let you know once we find a workaround. Please stay tuned!
Regards.
Thank you very much!
Not sure if this is any help, but I created this CSS which gets round the issue in my Metronic project
select.select2-hidden-accessible.is-invalid + .select2 .select2-selection {
border-color: var(--bs-form-invalid-border-color);
padding-right: calc(1.5em + 1.55rem);
background-image: url("data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" fill="none" stroke="%23F8285A"%3e%3ccircle cx="6" cy="6" r="4.5"/%3e%3cpath stroke-linejoin="round" d="M5.8 3.6h.4L6 6.5z"/%3e%3ccircle cx="6" cy="8.2" r=".6" fill="%23F8285A" stroke="none"/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.3875rem) center;
background-size: calc(0.75em + 0.775rem) calc(0.75em + 0.775rem);
}
select.select2-hidden-accessible.is-valid + .select2 .select2-selection {
border-color: var(--bs-form-valid-border-color);
padding-right: calc(1.5em + 1.55rem);
background-image: url("data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"%3e%3cpath fill="%2317C653" d="M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z"/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.3875rem) center;
background-size: calc(0.75em + 0.775rem) calc(0.75em + 0.775rem);
}
