title: JQuery Unobtrusive Validation firing on dropdownlist when it should not
body: <p>I have the following in an .NET MVC3 using viewmodels.  I am using Razor and FluentValidation (but I have also tried DataAnnotations with the same results).</p>
  
  <p>From View:</p>
  
  <pre><code>@Html.DropDownListFor(model=&gt;model.L2, Model.RegisteredL2s, "[Select One]")
  </code></pre>
  
  <p>From Controller:</p>
  
  <pre><code>    [HttpGet]
      [Authorize(Roles = "Supervisor")]
      public ActionResult Edit(string siteId, bool? isNew)
      {
              SiteEditViewModel model = new SiteEditViewModel();
  
                     List&lt;SelectListItem&gt; items = RegisteredL2Repository.GetRegisteredL2List()
                                                        .Select(x =&gt; new SelectListItem() { Text = x.L2, Value = x.L2.Trim() })
                                                        .OrderBy(x =&gt; x.Text)
                                                        .ToList();
  
                     model.RegisteredL2s = items.AsEnumerable();
  
                     if(!isNew.HasValue)
                     {
                          model.IsNew = false;
                     }
  
                     if(isNew.HasValue &amp;&amp; (bool)isNew)
                     {
                          model.IsNew = true;
                          return View(model);
                     }
  
                     if(model.IsNew)
                     {
                          return View(model);
                     }
  
                     model.ConvertModelToViewModel(SiteRepository.GetSite(siteId));
  
                     return View("Edit", model);
                }
       }
  </code></pre>
  
  <p>From ViewModel:</p>
  
  <pre><code>[DisplayName("Site:")]
            [TextboxLength(2)]
            public virtual string SiteId { get; set; }
  
            [DisplayName("L2:")]
            public virtual string L2 { get; set; }
  
            [DisplayName("Description:")]
            [TextboxLength(50)]
            public virtual string Description { get; set; }
  
            public IEnumerable&lt;SelectListItem&gt; RegisteredL2s { get; set; }
  
            public bool IsNew { get; set; }
  
            public string OverallError { get; set; }
  </code></pre>
  
  <p>From my Validator class (Fluent):</p>
  
  <pre><code>public SiteEditValidator()
            {
                 RuleFor(model =&gt; model.SiteId)
                      .NotEmpty()
                      .WithMessage("Site is required.")
                      .Length(2)
                      .WithMessage("Site must be 2 characters. Ex: 1C")
                      .Matches(@"^[0-9A-Za-z]{2}$")
                      .WithMessage("Site contains invalid characters. Only letters and numbers.");
  
                 RuleFor(model =&gt; model.L2)
                      .NotEmpty()
                      .WithMessage("L2 is required.")
                      .Length(2)
                      .WithMessage("L2 must be 2 characters. Ex: 30")
                      .Matches(@"^[\d]{2}$")
                      .WithMessage("L2 contains invalid characters. Only numbers are allowed.");
  
                 RuleFor(model =&gt; model.Description)
                      .NotEmpty()
                      .WithMessage("Description is required.")
                      .Length(3, 50)
                      .WithMessage("Description must be at least 3 characters and not more than 50.")
                      .Matches(@"^[\w\,\.\'\-\s]{3,50}$")
                      .WithMessage("Description contains some invalid characters.");
            }
  </code></pre>
  
  <p>And the generated HTML:</p>
  
  <pre><code>&lt;div class="Edit-Field"&gt;
                 &lt;div class="Edit-Field-Label" style="width: 5em"&gt;
                      &lt;label for="SiteId"&gt;Site:&lt;/label&gt;
                 &lt;/div&gt;
                 &lt;div class="Editor-For"&gt;
                      &lt;input autocomplete="off" data-val="true" data-val-length="Site must be 2 characters. Ex: 1C" data-val-length-max="2" data-val-length-min="2" data-val-regex="Site contains invalid characters. Only letters and numbers." data-val-regex-pattern="^[0-9A-Za-z]{2}$" data-val-required="Site is required." id="SiteId" maxlength="2" name="SiteId" readonly="readonly" style="width: 2.5em; background-color: LightGrey" type="text" value="30" /&gt;
                      &lt;div class="Validation-For"&gt;
                           &lt;span class="field-validation-valid" data-valmsg-for="SiteId" data-valmsg-replace="true"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                 &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="Edit-Field"&gt;
                 &lt;div class="Edit-Field-Label" style="width: 5em"&gt;
                      &lt;label for="L2"&gt;L2:&lt;/label&gt;
                 &lt;/div&gt;
                 &lt;div class="Editor-For"&gt;
                      &lt;select data-val="true" data-val-length="L2 must be 2 characters. Ex: 30" data-val-length-max="2" data-val-length-min="2" data-val-regex="L2 contains invalid characters. Only numbers are allowed." data-val-regex-pattern="^[\d]{2}$" data-val-required="L2 is required." id="L2" name="L2"&gt;&lt;option value=""&gt;[Select One]&lt;/option&gt;
  &lt;option value="30"&gt;30&lt;/option&gt;
  &lt;option value="31"&gt;31&lt;/option&gt;
  &lt;option value="32"&gt;32&lt;/option&gt;
  &lt;/select&gt;
                      &lt;div class="Validation-For"&gt;
                           &lt;span class="field-validation-valid" data-valmsg-for="L2" data-valmsg-replace="true"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                 &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="Edit-Field"&gt;
                 &lt;div class="Edit-Field-Label" style="width: 5em"&gt;
                      &lt;label for="Description"&gt;Description:&lt;/label&gt;
                 &lt;/div&gt;
                 &lt;div class="Editor-For"&gt;
                      &lt;input autocomplete="off" data-val="true" data-val-length="Description must be at least 3 characters and not more than 50." data-val-length-max="50" data-val-length-min="3" data-val-regex="Description contains some invalid characters." data-val-regex-pattern="^[\w\,\.\&amp;#39;\-\s]{3,50}$" data-val-required="Description is required." id="Description" maxlength="50" name="Description" style="width: 30em" type="text" value="Central Office-Cash Receipts Unit" /&gt;
                      &lt;div class="Validation-For"&gt;
                           &lt;span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                 &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  
  <p>Now the problem: </p>
  
  <p>I have the L2 field being drawn from a prepopulated IEnumerable (RegisteredL2s) and having that as a dropdownlist (ID=L2, roughly middle of the html). L2 is required and must be of a certain length (2). My problem is that even when a user has picked something other than the [Select One] the length error appears. If I remove that error the Regular Expression error appears. Server-side validation on submit works correctly. Why is it doing this and how do I stop it? Or can I just turn off the client-side for this one field?</p>
  
  <p><strong>Update:</strong>
  I believe I found an issue with jquery.validate.js... I would like someone to confirm this.</p>
  
  <p>Here is the original lines of code that I changed that seems to have fixed my problem:
  this is line 683. Line 686 is the problem point.</p>
  
  <pre><code>getLength: function(value, element) {
    switch( element.nodeName.toLowerCase() ) {
      case 'select':
  
          return $("option:selected", element).length;            case 'input':
          if( this.checkable( element) )
          return this.findByName(element.name).filter(':checked').length;
          }
      return value.length;
      },
  </code></pre>
  
  <p>I believe that when you have a required dropdown value with the length validator also present, it generates the error. When I run my code the length of this line returns 1 not 2. If I change the bolded line to <code>return $("option:selected", element).val().length;</code> it functions properly. Any comments on if this is a proper bug and if my fix will not interfere with any other part of jquery.validation would be helpful.</p>
  
  <p>This is from jquery.validation 1.8.1 (updated from 1.7 since I thought my versions may have been out of sync) Jquery = 1.6.1. </p>
  
  <p><strong>Update 2:</strong>
  Not sure if this should be an exact answer but:</p>
  
  <p>It turns out that according to the JQuery.Validation documentation for rangelength (which is what jquery.validation.unobtrusive constructs for a Length of exactly 2) <a href="http://docs.jquery.com/Plugins/Validation/Methods/rangelength#range" rel="noreferrer">here</a> It states that for selects (dropdownlist) it is for ensuring that a certain number items has been selected not for verifying the length of the value. </p>
  
  <p>I am after checking the value length or turning validation off on the client side for this particular item while retaining validation server-side.</p>