Question

In my MVC3 app on invalidate form, focus is not set on the first select list (if the select list data is empty/invalid). Select list is invalidated but focus is not set. In case of input type i.e textbox, radio etc it works fine. I wonder what’s missing??

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

The class required was missing. Set style of the select list as class=’required’ and it works fine.