Select List Focus on Validation in MVC 3 with Jquery Validation

Question

在我的MVC3应用程序的无效表单中，焦点没有设置在第一个选择列表上(如果选择列表数据为空/无效)。选择列表已失效，但未设置焦点。在输入类型的情况下，即文本框，广播等，它工作得很好。我想知道到底少了什么？？

Cool...here comes the model and view...
**Model**

 public class RegisterModel
    {
        [Remote("CheckDuplicateUserName","Account")]
        [Display(Name = "User name")]
        [Required(ErrorMessage = "This field is required.")]
        [StringLength(30)]
        public string UserName { get; set; }


        [DataType(DataType.EmailAddress)]
        [Display(Name = "Email address")]
        [Remote("CheckDuplicateEmail", "Account")]
        [Required(ErrorMessage = "This field is required.")]
        public string Email { get; set; }


        [ValidatePasswordLength]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        [Required(ErrorMessage = "This field is required.")]
        [StringLength(30)]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        [StringLength(30)]
        public string ConfirmPassword { get; set; }


        //additional fields

        [Display(Name = "Name")]
        [Required(ErrorMessage = "This field is required.")]
        [StringLength(30)]
        public string Name { get; set; }

        [Display(Name = "Address")]
        [StringLength(100)]
        public string Address { get; set; }

        [Display(Name = "City")]
        [Required(ErrorMessage = "This field is required.")]
        public string City { get; set; }


    }

**View** 


@model MyShowCase.Models.RegisterModel
@{
    ViewBag.Title = "Register";
}

<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("Register","Account"))
{
    @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
    <div id="register">
       <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName) *
                @Html.ValidationMessageFor(m => m.UserName)
                  <span class="instruction"> username should be alphanumeric without any special characters.</span>

            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password) *   @Html.ValidationMessageFor(m => m.Password)
                <span class="instruction"> Passwords are required to be a minimum of @ViewBag.PasswordLength characters in length.</span>


            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.ConfirmPassword)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.ConfirmPassword) *
                @Html.ValidationMessageFor(m => m.ConfirmPassword)
            </div>
            <div class="editor-label">
                @Html.LabelFor(m => m.Name)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Name) *
                @Html.ValidationMessageFor(m => m.Name)
                  <span class="instruction"> Specify your Full Name here.</span>

            </div>

     <div class="editor-label">
                @Html.LabelFor(m => m.City)
            </div>
            <div class="editor-field">
                <select id="City" name="City">
                    <option value="" selected="selected"></option>
                    <option >Dubai</option>
                    <option >Abu Dhabi</option>

                </select>
                *
                @Html.ValidationMessageFor(m => m.City)
            </div>

    </div>
}

Here is all what i have, the problem is that focus is not set on "City" Dropdown if City is not selected. Its validated but the focus in not set....


web.config 
  <appSettings>
        <add key="ClientValidationEnabled" value="true" />
        <add key="UnobtrusiveJavaScriptEnabled" value="true" />

    </appSettings>

Answer 1

缺少所需的类。将选择列表的样式设置为class='required‘，它就能正常工作。

Answer 2

如果您希望将下拉列表集中在按钮上，单击validate，那么您只需要在CSS文件中添加一个类。

.form-control.input-validation-error {
border: 1px solid #b94a48;
}

它在我的代码中工作。试试看。