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

问题

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"
        }
    };

回答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.

回答2:

In order to trigger the client-side validation, the input has to be within a <form>, and depending on version(MVC 3 and earlier), specifically using @Html.BeginForm.

If that's not the problem, can you post more of the view?

回答3:

in the model all you have to do is set an allowed range with an annotation. The "default value" is 0 so set your range to 1 to maxint. You will throw a model error if they don't choose something.

来源：https://stackoverflow.com/questions/24674796/mvc-5-adding-client-validation-to-refuse-the-default-value