jQuery Chosen Dropdown validation client site doesn't work

问题

My model class contains of required lookup value which is a lookup-based record:

[Required]
[DisplayName(\"Business Unit\")]
public string value { get; set; }

[Required] //not working on client side?
[DisplayName(\"Business Group\")]
public int id_businessgroup { get; set; }

View:

    <div class=\"editor-label\">
        @Html.LabelFor(model => model.value)
    </div>
    <div class=\"editor-field\">
        @Html.EditorFor(model => model.value)
        @Html.ValidationMessageFor(model => model.value)
    </div>

    <div class=\"editor-label\">
        @Html.LabelFor(x=>x.BusinessGroup.value)
    </div>
    <div class=\"editor-field\">
        @Html.DropDownListFor(x => x.id_businessgroup, new SelectList(ViewBag.BusinessGroups,\"id\",\"value\"),\"Please select group from list...\")
        @Html.ValidationMessageFor(x => x.id_businessgroup)
    </div>

@section scripts{
  @Html.Partial(\"ScriptUseChosen\")
}

Controller:

public ActionResult Create()
    {
        ViewBag.BusinessGroups = DB.BusinessGroups.Where(x => x.is_active).OrderBy(x => x.value).ToList();
        return View();
    }

Web.config:

<add key=\"ClientValidationEnabled\" value=\"true\" />
<add key=\"UnobtrusiveJavaScriptEnabled\" value=\"true\" />

BundleConfig.cs:

            bundles.Add(new ScriptBundle(\"~/bundles/jqueryval\").Include(
            \"~/Scripts/jquery.validate*\",
            \"~/Scripts/jquery.unobtrusive*\"));

Validation for value is working perfectly on client side, but it\'s not working on the Chosen\'s dropdown. What could be the reason?

回答1:

jQuery Chosen updates the html by making the original select hidden (style="Display:none"). By default jquery.validate (1.9.0) ignores hidden elements. You can override the default using

$.validator.setDefaults({ 
  ignore: []
});

$('form').validate({
    ignore: []
});

回答2:

Make sure the option label is not rendered as Please select group from list... in your dropdown, then it will be regarded as a selected value by default and the client side validation will pass.

Instead of using ViewBag for databinding try changing your model like below and i tested it's working fine,

    [Required]
    [DisplayName("Business Unit")]
    public string value { get; set; }

    [Required] //not working on client side?
    [DisplayName("Business Group")]
    public int id_businessgroup { get; set; }

    public IEnumerable<SelectListItem> BussinessGroup { get; set; }

And bind the data to the BussinessGroup in controller like,

            BussinessGroup = new List<SelectListItem>
            {
                new SelectListItem
                {
                    Text = "A",
                    Value = "1"
                },

                    new SelectListItem
                {
                    Text = "B",
                    Value = "2"
                }
            }

Finally in the view bind the dropdown as,

    @Html.DropDownListFor(x=>x.id_businessgroup, Model.BussinessGroup, "Please select group from list...")
    @Html.ValidationMessageFor(x=>x.id_businessgroup)