Not getting validation message for @Html.DropDownListFor() once Chosen jquery is used

Question

Code is given below:
If i do not select any value in the combobox and press submit, no validation message is asked.

<tr>
            <td>Department </td>
            <td> : </td>
            <td class="@*@Model.NoEdit*@">    
                @Html.DropDownListFor(m => m.DepartmentId, new SelectList(Model.Departments, "SelectedDepartmentId", "DepartmentCode"), "-- Select Department--", new {@class = "chosen-select", id = "cboDeptartment" })
                @Html.ValidationMessageFor(model => model.DepartmentId)
            </td>

Answer 1

Restating my brief comment as an answer. :-)

To get the validation messages, I use the same approach Joseph mentions, though I use an HTML class for those selects that I am using with Chosen. For example:

validator.settings.ignore = ":hidden:not(.select-chosen)";

To clear the validation message when a value is selected, you need to attach an event listener for "change" events and explicitly force revalidation of the select. So for example, assuming you have a variable select that references the select box:

select.on("change", function(evt, params) {
    $(evt.target).valid();
});

Chosen triggers those "change" events whenever it's value changes.

Answer 2

Solved after a lot of research...

$(document).ready(function () {
    var validator = $("#Your_form_id").data('validator');
    validator.settings.ignore = ":hidden:not(select)";
});

Answer 3

So aligning the above answers properly

 $(function () {
        var validator = $("#Your_form_id").data('validator');
        validator.settings.ignore = ":hidden:not(.chosen-select)";
        $(".chosen-select").chosen();
        $("#Your_dropdown_id").change(function (evt, params) {
            $(evt.target).valid();
        })

    });