Question

In a view I am adding an object of type person (for simplicity). However, the validation for a dropdown of which car of all cars to choose (for example) will not show up before a post. Let me elaborate.

In my controller I setup a viewmodel to pass in. The populating is not a problem. Here are the simple versions of the models.

public class PersonViewModel
{
 public Person Person { get; set;}

 public List<Car> Cars { get; set;}
}

public class Car
{
 [Key]
 public int CarId { get; set;}
 [Required]
 public string Name { get; set;}
}

public class Person
{
 [Key]
 public int PersonId { get; set;}
 [Required]
 public int CarId { get; set;}
 [Required]
 public string FullName { get; set;}
}

Okay, pretty basic so far. In the view is the problem.

In the view:

@model PersonViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" 
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" 
type="text/javascript"></script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
    <legend>Add Person</legend>

    <div class="editor-label">Car</div>
    <div class="editor-field">
        @Html.DropDownListFor(
            m => m.Person.CarId,
            new SelectList(
                Model.Cars,
                "CarId",
                "Name",
                0
            ),
            "-- Select A Car --"
        )
        @Html.ValidationMessageFor(m=> m.Person.CarId)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m=> m.Person.FullName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Person.FullName)
        @Html.ValidationMessageFor(model => model.Person.FullName)
    </div>

    <p>
        <input type="submit" value="Create Person" />
    </p>
</fieldset>
}

When this view is rendered, a form to create a person is created. In the form, a dropdownfor list is generated with car names, and a person’s name field is available. If a car is selected and a person’s name is filled in, then create is clicked, the post goes through with no problems.

However, here is the discrepancy. If a person’s name is not filled in and create is clicked then the input box is highlighted red with the message saying name is required. If a car is not chosen, then the form will submit. In the controller, this is easy to catch under if(ModelState.isValid), but I would like to point out to the user that their person has no car. Adding the field [Required] public int CarId to the viewmodel and then referencing that through the binding will stop the form from being submitted if no car is chosen but seems to be a hacky solution.

The reason for the validation not being checked is that for some reason the generated <select> html object is lacking the added decoration class="input-validation-error" data-val-required="The field is required." data-val-number="The field must be a number." data-val="true".

How can I make sure this decoration is included?

Answer 1

I guess that DataAnnotationsModelValidatorProvider.AddImplicitRequiredAttributeForValueTypes is somehow set to false. This means that the Required attribute won’t be automatically added for value types such as integers. If you set it to true, the required attribute will be automatically added to the metadata of all value types and the HTML5 data-* attributes will be emitted. Its default value is true though.

To avoid this kind of problems you could use a real view model:

public class CreatePersonViewModel
{
    public PersonViewModel Person { get; set;}
    public List<CarViewModel> Cars { get; set;}
}

public class CarViewModel
{
    public int CarId { get; set;}

    public string Name { get; set;}
}

public class PersonViewModel
{
    [Required]
    public int? CarId { get; set;}

    [Required]
    public string FullName { get; set;}
}

Notice that we no longer need a PersonId property for this view model since we are creating a new person which doesn’t have an id assigned yet. Also notice that the CarId is declared as nullable integer and decorated with the Required attribute. Since in our dropdownlist we allow for a default value (-- Select A Car --) we must properly reflect that on the view model by using a nullable type.