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

asp.net, asp.net-mvc, asp.net-mvc-5, client-side-validation, jquery

Solution

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.

Problem

Original source