title: client side validation of <select> in asp.net MVC 4
body: <p>I am working on asp.net MVC application. I have a dropdown like this in my razor view:</p>
  
  <pre><code> &lt;select id="ddlAreaID"&gt;
   @foreach (var item in Model.Areas)
   {
       &lt;optgroup label="@item.CityName"&gt;
       @foreach (var val in item.Areas)
       {
           var selected = (val.AreaID == Model.AreaID) ? "selected=selected" : string.Empty;
           &lt;option value="@val.AreaID" @selected&gt;@val.AreaName&lt;/option&gt;
       }
       &lt;/optgroup&gt;
   }
   &lt;/select&gt;
   @Html.HiddenFor(m =&gt; m.AreaID)
  </code></pre>
  
  <p>I have added first item to collection like this:</p>
  
  <pre><code>Areas.Insert(0, new CityInfo() 
  {
      Areas = new List&lt;AreaInfo&gt;() 
      { 
          new AreaInfo() 
          { 
              AreaID = 0, 
              AreaName = "select an Area" , 
              CityName = "" 
          }
      }  
  });
  </code></pre>
  
  <p>I want to perform client validation of this select/drop down so that at least one item is selected. How can I do this ? </p>
  
  <p>Please suggest.</p>