MVC 5 - Adding Client Validation to refuse the default value?

Question

I'm using a DropDownListFor and provide a default selection of -- Select Make -- which has an empty value. I want to provide the user with a hint of what to do (thus the 'Select Make') but don't want to allow them to actually submit that value. Currently the website allows this to go through.

I thought that adding a minimum length of 2 would prevent it but no luck.

I'm fairly new to .NET MVC so let me know if I'm doing this in the completely wrong way.

The actual POST request body is:

Make=&OtherArgument=1&NextArgument=test

View code:

@Html.LabelFor(m => m.Make)
@Html.DropDownListFor(m => m.Make, Model.Make, "-- Select Make --")
@Html.ValidationMessageFor(m => m.Make)

Model code:

    [Required(ErrorMessage = "*", AllowEmptyStrings = false)]
    [StringLength(50, MinimumLength = 2, ErrorMessage = "*")]
    public IEnumerable<SelectListItem> Make = new List<SelectListItem>
    {
        new SelectListItem
        {
            Text = "Deere",
            Value = "Deere"
        },
        new SelectListItem
        {
            Text = "Case",
            Value = "Case"
        },
        new SelectListItem
        {
            Text = "CAT",
            Value = "CAT"
        }
    };

Answer 1

The first issue here is the distinction between the model selected and the models that a user can select. Adding the ModelSelect property to your model solves this (and some view changes).

The second issue is enabling jquery unobtrusive validation by adding the script references.

These are the steps you need to take to get this working with javascript validation preventing form submission (assuming MVC4+).

Model

    public class AModel
    {
        [Required(ErrorMessage = "*", AllowEmptyStrings = false)]
        [StringLength(50, MinimumLength = 2, ErrorMessage = "*")]
        public string SelectedMake { get; set; }
        public IEnumerable<SelectListItem> Make = new List<SelectListItem>
        {
            new SelectListItem
            {
                Text = "Deere",
                Value = "Deere"
            },
            new SelectListItem
            {
                Text = "Case",
                Value = "Case"
            },
            new SelectListItem
            {
                Text = "CAT",
                Value = "CAT"
            }
            };
    }

Note the SelectedMake property

View

@using(Html.BeginForm()){
    @Html.LabelFor(m => m.Make)
    @Html.DropDownListFor(m => m.SelectedMake, Model.Make, "-- Select Make --")
    @Html.ValidationMessageFor(m => m.SelectedMake)
    <input type="submit" value="submit" />
}

Note SelectedMake in the first param for the dropdown and the ValidationMessageFor

Script references

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

Needed to enable jquery validation

Screen grab

Note the red asterix, jquery unobtrusive now prevents the form submission.