title: jquery validate on @Html.DropDownListFor with bootstrap selectpicker
body: <p>I have a <code>form</code> where say I have 2 controls. A <code>select</code> control which has been customized using <code>bootstrap-selectpicker</code> and a <code>textbox</code> which are <code>strongly typed</code> with a <code>viewmodel</code>. Below are the details of the project structure and here is the <strong><a href="https://dotnetfiddle.net/RbkJ2M" rel="nofollow">DEMO</a></strong> and validation is using <strong><a href="http://jqueryvalidation.org/validate/" rel="nofollow">jquery-validate</a></strong></p>
  
  <p><strong>SampleViewModel.cs</strong></p>
  
  <pre><code>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;}
  }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
          &lt;h1&gt;Hello Stranger&lt;/h1&gt;
              @using (Html.BeginForm("", "", FormMethod.Post, 
                               new { enctype = "multipart/form-data", id="frmSample" }))
              {
                  &lt;div class="form-group"&gt;
                      @Html.DropDownListFor(m =&gt; m.RoleId, Model.Roles, "Please Select your Country", new{@class="selectpicker"})
                      @Html.ValidationMessageFor(m=&gt;m.RoleId)
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      @Html.TextBoxFor(m =&gt; m.name, null, new{@class="form-control"}) 
                      @Html.ValidationMessageFor(m=&gt;m.name)
                  &lt;/div&gt;
                  &lt;button type="button" class="btn btn-success submit"&gt;Ask&lt;/button&gt;
              }
              &lt;br/&gt;&lt;br/&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>public class HomeController : Controller
  {
      [HttpGet]
      public ActionResult Index()
      {
          SampleViewModel model=new SampleViewModel();
          model.Roles = new SelectList(new string[] { "Admin", "Manager" });
          return View(model);
      }
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function(){
      $('.selectpicker').selectpicker();
      $("#frmSample").validate({
          onfocusout: true
      });
  });
  $('.submit').on('click',function(){
      if($("#frmSample").valid())
          alert(true);
  });
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <ul>
  <li>The problem I am facing is my <code>dropdown</code> element doesn't get
  validated using <code>jquery validation</code> whereas my <code>textbox</code> gets
  validated. May be the problem is the way I am initializing or
  assigning the <code>Required</code> attribute to the particular <code>model</code>
  attribute and I am not sure for which one to assign the <code>required</code>
  attribute.</li>
  <li>I have given <code>onfocusout:true</code> to validate on focus out but unless
  you type something on <code>textbox</code> and delete the content, the
  validation doesn't happen</li>
  </ul>
  
  <p>Any help on this is highly appreciated.</p>