Chosen plugin validation asp.net mvc - asp.net-mvc

Question

I am using chosen js plugin for multiselect drop down in my asp.net mvc core application. I want to validate if the user selects atleast one value in that multiselect listbox.
I actually want red bordered listbox with Required on next to listbox, however its not working. I am using the same code for single selected dropdown list and its working (but its with out chosen plugin). I couldn't find any documentation in the chosen github as well.
cshtml code
#Html.ListBoxFor(model => model.SelectedLanguages, new MultiSelectList(Model.Languages, "Value", "Text"), htmlAttributes: new { id = "LanguageDropDown", multiple = "multiple", #class = "listbox-text" })
#Html.ValidationMessageFor(model => model.Languages)
Model
[Display(Name = "Language(s)")]
[Required(ErrorMessage = "Required")]
public string Language { get; set; }
public IEnumerable<SelectListItem> Languages { get; set; }
public string[] SelectedLanguages { get; set; }
Controller (for loading the data to the List box)
public IEnumerable<SelectListItem> GetLanguages()
{
using (var _dbcontext = new DataContext(DataContext.opsBuild.dbOptions))
{
List<SelectListItem> languages = _dbcontext.Languages.AsNoTracking()
.Where(n => n.IsActive == true)
.OrderBy(n => n.LanguageName)
.Select(n =>
new SelectListItem
{
Value = n.LanguageID.ToString(),
Text = n.LanguageName
}).ToList();
return new SelectList(languages, "Value", "Text");
}
}
*** js block***
$("#LanguageDropDown").chosen({
placeholder_text_multiple: "Select Language(s)",
});

Answer 1

Change your code like below:
<form asp-action="test">
#Html.ListBoxFor(model => model.Language, new MultiSelectList(Model.Languages, "Value", "Text"), htmlAttributes: new { id = "LanguageDropDown", multiple = "multiple", #class = "listbox-text" })
#Html.ValidationMessageFor(m => m.Language)
<div>
<input type="submit" value="submit" />
</div>
</form>
#section Scripts
{
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/lib/chosen_v1.8.7/docsupport/prism.css">
<link rel="stylesheet" href="~/lib/chosen_v1.8.7/docsupport/style.css">
<link rel="stylesheet" href="~/lib/chosen_v1.8.7/chosen.css">
<script src="~/lib/chosen_v1.8.7/chosen.jquery.js"></script>
<script src="~/lib/chosen_v1.8.7/docsupport/prism.js"></script>
<script src="~/lib/chosen_v1.8.7/docsupport/init.js"></script>
<script>
$("#LanguageDropDown").chosen({
placeholder_text_multiple: "Select Language(s)"
});
$.validator.setDefaults({
ignore: []
});
</script>
<style>
#LanguageDropDown-error {
color: red;
}
</style>
}
Result: