jquery validate on @Html.DropDownListFor with bootstrap selectpicker

Question

I have a form where say I have 2 controls. A select control which has been customized using bootstrap-selectpicker and a textbox which are strongly typed with a viewmodel. Below are the details of the project structure and here is the DEMO and validation is using jquery-validate

SampleViewModel.cs

public class SampleViewModel
{
        [Required(ErrorMessage="Please Select a Role")]
        //Not sure whether Required has to be assigned to RoleId or Roles
        public int RoleId { get; set; }
        public SelectList Roles { get; set; }
        [Required(ErrorMessage="Please Enter a name")]
        public string name{get;set;}
}

View

<div class="container">
    <div class="col-md-6 col-md-offset-3">
        <h1>Hello Stranger</h1>
            @using (Html.BeginForm("", "", FormMethod.Post, 
                             new { enctype = "multipart/form-data", id="frmSample" }))
            {
                <div class="form-group">
                    @Html.DropDownListFor(m => m.RoleId, Model.Roles, "Please Select your Country", new{@class="selectpicker"})
                    @Html.ValidationMessageFor(m=>m.RoleId)
                </div>
                <div class="form-group">
                    @Html.TextBoxFor(m => m.name, null, new{@class="form-control"}) 
                    @Html.ValidationMessageFor(m=>m.name)
                </div>
                <button type="button" class="btn btn-success submit">Ask</button>
            }
            <br/><br/>
        </div>
</div>

Controller

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        SampleViewModel model=new SampleViewModel();
        model.Roles = new SelectList(new string[] { "Admin", "Manager" });
        return View(model);
    }
}

JS

$(document).ready(function(){
    $('.selectpicker').selectpicker();
    $("#frmSample").validate({
        onfocusout: true
    });
});
$('.submit').on('click',function(){
    if($("#frmSample").valid())
        alert(true);
});

Problem

• The problem I am facing is my dropdown element doesn't get validated using jquery validation whereas my textbox gets validated. May be the problem is the way I am initializing or assigning the Required attribute to the particular model attribute and I am not sure for which one to assign the required attribute.
• I have given onfocusout:true to validate on focus out but unless you type something on textbox and delete the content, the validation doesn't happen

Any help on this is highly appreciated.

Answer 1

Your jquery plugin hides the <select> element that the DropDownListFor() method generates (display:none;) and adds its own html. By default hidden inputs are not validated by jquery.validate.js so you need to override this behavior using

$.validator.setDefaults({ 
  ignore: []
});

Note this will validate all hidden inputs so to just validate this one, you could use ignore: ":hidden:not('#RoleId')"

In addition, you have other errors. Your RoleId property is typeof int but your SelectList will generate options with values that are strings ("Admin" and "Manager") and cannot be bound to int. Either change the property to string RoleId or create a SelectList with values that are typeof int. For example if you have a Roles table with fields int ID and string Name, then

var roles = db.Roles();
model.Roles = new SelectList(roles, "ID", "Name");

or

model.Roles = roles.Select(r => new SelectListItem()
{
  Value = r.ID.ToString(),
  Text = r.Name
};

Refer DotNetFiddle