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>

Vulturine

where is jquery code? – Boneblack

I'm not sure i understand you.Chosen is a jquery plugin Its available in this site harvesthq.github.io/chosen – Vulturine

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.

Lallation

I have same problem I added Validator.settings... line but now when i click on the button my model dosn't apears any more – Peking

Answer 2

Solved after a lot of research...

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

Vulturine

Now its working but it does not remove the validation message when i select a value on to dropdownlist.It goes off only when i press Submit button. – Vulturine

Joseph, did you resolve the issue with clearing the validation message when a value is selected? I'm trying to resolve that one, now. – Lallation

OK, found the solution. Assuming the select box is referenced by the variable select: select.on('change', function(evt, params) { $(evt.target).valid(); }); This forces validation of the field. – Lallation

Thanks @MikeBrennan, i ended up using bootstrap dropdown .but could you post it as an ans so that i could mark it as ans.. might help smone in future :) – Vulturine

@MikeBrennan where to add The select function I tried this $(document).ready(function () { var validator = $("#form").data('validator'); validator.settings.ignore = ":hidden:not(.chosen-select)"; }); select: select.on('change', function (evt, params) { $(evt.target).valid(); }); – Peking

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();
        })

    });

Opponent