Validating required selection in DropDownList

Question

My view model defines property which has to be displayed as combo box. Property definition is:

[Required]
public int Processor { get; set; }

I'm using DropDownListFor to render combo box:

<%=Html.DropDownListFor(r => r.Processor, Model.Processors, Model.Processor)%>

Model.Processors contains IEnumerable<SelectListItem> with one special item defined as:

var noSelection = new SelectListItem
  {
    Text = String.Empty,
    Value = "0"
  };

Now I need to add validation to my combo box so that user must select different value then 'noSelection'. I hoped for some configuration of RequiredAttribute but it doesn't have default value setting.

Answer 1

How about this:

[Required]
public int? Processor { get; set; }

And then:

<%= Html.DropDownListFor(
    x => x.Processor, Model.Processors, "-- select processor --"
) %>

And in your POST action

[HttpPost]
public ActionResult Index(MyViewModel model)
{
    if (ModelState.IsValid)
    {
        // the model is valid => you can safely use model.Processor.Value here:
        int processor = model.Processor.Value;
        // TODO: do something with this value
    }
    ...
}

And now you no longer need to manually add the noSelection item. Just use the proper DropDownListFor overload.

Answer 2

One possible issue is that jQuery Validate does run any rules if the value of an element is empty.

You can get around this by retriggering the validation when the user loses focus:

// select statements not firing null validation automatically
$("select").blur(function () { $(this).valid() });