title: knockout.js validation textbox highlight
body: <p>I'm working with validation and I am using knockout.js (and durandal.js) for a view modal.</p>
  
  <p>I want to make a textbox's border red when it's blank if I click on submit button.</p>
  
  <p>When a user starts to type in the textbox, the border color red should be removed.</p>
  
  <p>Code is here: <a href="http://jsfiddle.net/LvHUD/1/" rel="nofollow">http://jsfiddle.net/LvHUD/1/</a></p>
  
  <p>What I did is: </p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="Scripts/knockout.debug.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/knockout.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/knockout.validation.debug.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/knockout.validation.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="text" data-bind='value: username' /&gt;
      &lt;br /&gt;
      &lt;button data-bind="click: submit"&gt;Submit&lt;/button&gt;
      &lt;div data-bind="visible: showErrors, text: errors" /&gt;
      &lt;script&gt;
          function ViewModel() {
              var self = this;
              self.username = ko.observable().extend({
                  required: true
              });
              self.showErrors = ko.observable(false);
  
              self.submit = function () {
                  self.showErrors(true);
                  if (self.isValid()) {
                      // save data here   
                  }
              }
  
              self.errors = ko.validation.group(self);
          }
  
          ko.validation.init({
              registerExtenders: true,
              messagesOnModified: true,
              insertMessages: false
          });
  
          ko.applyBindings(new ViewModel());
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>