C# – MVC 4 Dropdown validation

asp.net-mvc-4cjqueryunobtrusive-validation

OK, this is driving me nuts. I've got an MVC 4 website that is validating textboxes on the client, but not the dropdowns.

My (cut-down) model looks like this:

[Required]
public int? FabricOptionSelected { get; set; }
public List<SelectListItem> FabricOptions { get; private set; }

My (cut-down) controller looks like this:

model.FabricOptions.AddRange(product.Options
.Where(a=>a.ProductOptionCategory == Domain.Products.ProductOptionCategory.Fabric)
.ToSelectList( m => m.Name, m => m.Id.ToString(), "-- Select --"));

My (cut-down) view looks like this:

@if (Model.FabricOptions.Count > 1)
    {
        <div class="row form-group">
            <div class="col-xs-2 control-label">Fabric</div>
            <div class="col-xs-4">@Html.DropDownListFor(m => m.FabricOptionSelected, Model.FabricOptions, new { @class = "form-control" })</div>
            <div class="col-xs-6">@Html.ValidationMessageFor(m => m.FabricOptionSelected)</div>
        </div>
    }

I have "~/Scripts/jquery.validate.js", and "~/Scripts/jquery.validate.unobtrusive.js" in my bundle config and the web.config has :

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

in the appsettings section.

Chrome console is not showing any errors and there is a text box with the Required attribute further down the page that is being fired.

.ToSelectList is an extension method:

public static List<SelectListItem> ToSelectList<T>
        (this IEnumerable<T> enumerable, 
        Func<T, string> text, 
        Func<T, string> value, 
        string defaultOption)
    {
        var items = enumerable.Select(f => new SelectListItem() { Text = text(f), Value = value(f) }).ToList();
        items.Insert(0, new SelectListItem() { Text = defaultOption, Value = "-1" });
        return items;
    } 

Can't figure out why the client-side validation in the view isn't firing for the drop-downs. I figure I'm missing something obvious but could really do with a hand on this one.

Best Answer

Make sure .ToSelectList (is this an extension you added?) sets the default -- Select -- value to null. Setting it to a nullable type is a good start but it needs to be null for Required to work.

Related Topic