title: Knockout validation not working
body: <p>I'm trying to get knockout validation to work in a small form with just one textbox and one select field.</p>
  
  <p>The jsfiddle behavior is not the same as mine. I get a validation for the select list but not for the textbox. the fiddle doesn't give any validation (but reports that <code>isValid()</code> is true).</p>
  
  <p>I'm not a javascript guru and might have done something wrong. There is a fiddle here: <a href="http://jsfiddle.net/DzrqK/" rel="nofollow">http://jsfiddle.net/DzrqK/</a>. The real page is loading the model in a bootstrap modal, but I've stripped that away for the fiddle.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="modal hide fade in" id="AddApplicationDialog" style="display: block;" aria-hidden="false"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" aria-hidden="true" data-bind="click: Cancel"&gt;×&lt;/button&gt;
          &lt;h3&gt;Add aplication&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
          &lt;form action="#" data-bind="submit: Save" id="add-app-dlg" class="form" novalidate="novalidate"&gt;
              &lt;div class="alert alert-info"&gt;
                  We strongly recommend that you create different applications for different device types as it improves our error analytics.
                  &lt;strong&gt;OutOfMememoryException&lt;/strong&gt; isn't as important in a mobile device as it's in a server with a lot of resources.            
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label"&gt;Application name:&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" data-bind="value: Name" name="Name" required="" minlength="3" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label"&gt;Application type:&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;select data-bind="value: ApplicationType" name="ApplicationType"&gt;
                          &lt;option value=""&gt;&lt;/option&gt;
                          &lt;option value="Mobile"&gt;Mobile device&lt;/option&gt;
                          &lt;option value="Client"&gt;Client computer&lt;/option&gt;
                          &lt;option value="Server"&gt;Server&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a href="#" class="btn btn-primary" data-bind="click: Save"&gt;Create aplication&lt;/a&gt;
          &lt;a href="#" class="btn" data-bind="click: Cancel"&gt;Cancel&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var AddApplicationModel = function () {
          var self = this;
          this.inited = false;
          this.Name = ko.observable().extend({ required: { message: 'Please supply your Name.' } });
          this.ApplicationType = ko.observableArray().extend({ required: true });
          this.Errors = ko.validation.group(self);
          this.isValid = ko.computed(function () {
              return self.Errors.length == 0;
          });
          this.Save = function () {
              if (!self.isValid()) {
                  self.Errors.showAllMessages();
                  return;
              }
  
              //closing the modal and invoking a callback here in the real version
          };
          this.Cancel = function () {
              //closing modal in the real version
          };
  
          ko.applyBindings(this, $('#AddApplicationDialog')[0]);
          return this;
      };
  new AddApplicationModel();
  </code></pre>