Chosen ASP.NET MVC plugin

Question

I’m trying to use the plugin chosen (http://harvesthq.github.io/chosen/) with the DropDownListFor, but when using this plugin the field validation not working.

Box.cshtml

@model CaixaViewModel

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    @if (Model.CaixaId > 0)
                    {
                        <label>Edição do caixa - @Model.Descricao</label>
                    }
                    else
                    {
                        <label>Cadastro de caixa</label>
                    }
                </div>
                <div class="panel-body">
                    @using (Html.BeginForm("Salvar", "Caixa"))
                    {
                        @Html.AntiForgeryToken()

                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                        @Html.Partial("_Caixa")

                        <div class="row">
                            <div class="col-lg-12">
                                <a href="@Url.Action("Index")" class="btn btn-default"><i class="fa fa-arrow-left fa-fw"></i> Voltar</a>
                                <button type="submit" class="btn btn-primary"><i class="fa fa-save fa-fw"></i> Salvar</button>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

    @section styles {    
        <link href="~/Content/bootstrap-chosen/bootstrap-chosen.css" rel="stylesheet" />
    }

    @section scripts {
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/ajax")
        <script src="~/Content/chosen_v1.5.1/chosen.jquery.js"></script>

        <script type="text/javascript">
            var config = {
                '.chosen-select': {},
                '.chosen-select-deselect': { allow_single_deselect: true },
                '.chosen-select-no-single': { disable_search_threshold: 10 },
                '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
                '.chosen-select-width': { width: "95%" }
            }
            for (var selector in config) {
                $(selector).chosen(config[selector]);
            }        
        </script>
    }

_Box.cshtml

@model CaixaViewModel

@Html.HiddenFor(a => a.CaixaId)
@Html.HiddenFor(a => a.Ativo)

<div class="row form-group">
    <div class="col-lg-12">
        @Html.LabelFor(model => model.PessoaId, htmlAttributes: new { @class = "control-label" })
        @Html.DropDownListFor(model => model.PessoaId, Html.PessoaLista(), htmlAttributes: new { @class = "form-control chosen-select" })
        @Html.ValidationMessageFor(model => model.PessoaId, "", new { @class = "text-danger" })
    </div>
</div>

<div class="row form-group">
    <div class="col-lg-6">
        @Html.LabelFor(model => model.CentroCustoId, htmlAttributes: new { @class = "control-label" })
        @Html.DropDownListFor(model => model.CentroCustoId, Html.CentroCustoLista(), htmlAttributes: new { @class = "form-control chosen-select" })
        @Html.ValidationMessageFor(model => model.CentroCustoId, "", new { @class = "text-danger" })
    </div>
    <div class="col-lg-6">
        @Html.LabelFor(model => model.CategoriaId, htmlAttributes: new { @class = "control-label" })
        @Html.DropDownListFor(model => model.CategoriaId, Html.CategoriaLista(), htmlAttributes: new { @class = "form-control chosen-select" })
        @Html.ValidationMessageFor(model => model.CategoriaId, "", new { @class = "text-danger" })
    </div>
</div>
<div class="row form-group">
    <div class="col-lg-12">
        @Html.LabelFor(model => model.Descricao, htmlAttributes: new { @class = "control-label" })
        @Html.EditorFor(model => model.Descricao, new { htmlAttributes = new { @class = "form-control", @autofocus = "" } })
        @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger" })
    </div>
</div>
<div class="row form-group">
    <div class="col-lg-12">
        @Html.LabelFor(model => model.Observacao, htmlAttributes: new { @class = "control-label" })
        @Html.EditorFor(model => model.Observacao, new { htmlAttributes = new { @class = "form-control", @autofocus = "" } })
        @Html.ValidationMessageFor(model => model.Observacao, "", new { @class = "text-danger" })
    </div>
</div>
<div class="row form-group">
    <div class="col-lg-4">
        @Html.LabelFor(model => model.Valor, htmlAttributes: new { @class = "control-label" })
        @Html.EditorFor(model => model.Valor, new { htmlAttributes = new { @class = "form-control", @autofocus = "" } })
        @Html.ValidationMessageFor(model => model.Valor, "", new { @class = "text-danger" })
    </div>
    <div class="col-lg-4">
        @Html.LabelFor(model => model.Tipo, htmlAttributes: new { @class = "control-label" })
        @Html.EditorFor(model => model.Tipo, new { htmlAttributes = new { @class = "form-control", @autofocus = "" } })
        @Html.ValidationMessageFor(model => model.Tipo, "", new { @class = "text-danger" })
    </div>

</div>

-

public class CaixaViewModel
    {
        public int CaixaId { get; set; }

        public bool Ativo { get; set; }

        [Display(Name = "Pessoa")]
        [Required]
        public int? PessoaId { get; set; }

        [Display(Name = "Categoria")]
        [Required]
        public int? CategoriaId { get; set; }

        [Display(Name = "Centro de custo")]
        [Required]
        public int? CentroCustoId { get; set; }

        [Display(Name = "Tipo")]
        public CaixaTipo Tipo { get; set; }

        [Display(Name = "Descrição")]
        [Required]
        public string Descricao { get; set; }

        [Display(Name = "Observação")]        
        public string Observacao { get; set; }

        [Display(Name = "Valor R$")]
        [Required]
        public decimal Valor { get; set; }

    }

public static SelectList PessoaLista(this HtmlHelper html)
        {
            SelectList list = null;

            using (CaixaCorridoContext context = new CaixaCorridoContext())
            {
                var pessoas = context.Pessoa                    
                   .OrderBy(a => a.Nome)
                   .Select(a => new SelectListItem()
                   {
                       Value = a.PessoaId.ToString(),
                       Text = a.Nome
                   }).ToList();

                pessoas.Add(new SelectListItem() { Value = "", Text = "", Selected = true });

                list = new SelectList(pessoas.OrderBy(a => a.Text), "Value", "Text");
            }

            return list;
        }

Answer 1

The solution was to add the following java script code

$('select').on('change', function () {
    $(this).valid();
});