title: Knockout and jQuery Validate
body: <p>I've some problems getting KO and jQuery Validate plugin work together.</p>
  
  <p>My model:</p>
  
  <pre><code>Parameter {
      int Id;
      string Name;
      decimal Price;
  }
  </code></pre>
  
  <p>And my HTML+JS:</p>
  
  <pre><code>&lt;DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv='Content-Type' content='text/html;charset=utf-8'&gt;&lt;/meta&gt;
          &lt;script type='text/javascript' src='js/jquery-1.8.3.min.js'&gt;&lt;/script&gt;
          &lt;script type='text/javascript' src='js/jquery.validate.min.js'&gt;&lt;/script&gt;
          &lt;script type='text/javascript' src='js/knockout-2.2.0.js'&gt;&lt;/script&gt;
          &lt;script type='text/javascript' src='js/knockout.mapping-latest.js'&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;script type="text/javascript"&gt;
          function AdminViewModel() {
  
                  var self = this;
                  self.parameters = ko.observableArray();
  
                  self.getParameters = function() {
                      // gets all parameters for the element with specified id (1)
                      $.getJSON('http://localhost:81/api/parameters/1', function(parameters){
                      ko.mapping.fromJS(parameters, {}, self.parameters);
                  });
              }
  
              self.save = function() {
                  alert('Submit!');
              }
          }
  
          jQuery(function( $ ) {
  
              var viewModel = new AdminViewModel();
  
              ko.applyBindings(viewModel);
  
              viewModel.getParameters();
  
              $("#form-settings").validate({ submitHandler: viewModel.save });
          });
      &lt;/script&gt;
      &lt;body&gt;
          &lt;form id="form-settings" action="javascript:void(0);"&gt;
              &lt;!-- ko foreach: parameters() --&gt;
              &lt;!--&lt;p data-bind="foreach: parameters()"&gt;--&gt;
                  Parameter &lt;input class="required" type="text" data-bind="value: $data.Name" /&gt;&lt;br /&gt;
                  Price &lt;input class="required number" type="text" data-bind="value: $data.Price" /&gt;&lt;br /&gt;
              &lt;!--&lt;/p&gt;--&gt;
              &lt;!-- /ko --&gt;
              &lt;button type="submit"&gt;Save&lt;/button&gt;
          &lt;/form&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Validation is not working properly, sometimes form is submitted and page reloaded also if there are errors, sometimes error messages are displayed only for one input,
  what's wrong with my code?</p>