title: MVC jquery validation using knockout why does the save method run even if fields are empty
body: <p>I have the following code:</p>
  
  <p>Index.cshtml:</p>
  
  <pre><code>    @using System.Web.Script.Serialization
  @model MvcApplication3.ViewModels.PersonViewModel
  &lt;script src="../../Scripts/jquery.validate.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- This is a *view* - HTML markup that defines the appearance of your UI --&gt;
  &lt;form class="transferListEditor" data-bind="submit: save"&gt;
  
      &lt;p&gt;First name: &lt;input class='required' data-bind="value: firstName, uniqueName: true" /&gt;&lt;/p&gt;
      &lt;p&gt;Last name: &lt;input class='required' data-bind="value: lastName, uniqueName: true" /&gt;&lt;/p&gt;
  
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody data-bind="foreach: activities"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;input data-bind="value: Name" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;a href="#" data-bind="click: $root.removeActivity"&gt;Remove&lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;    
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;button data-bind="click: addActivity"&gt;Add activity&lt;/button&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
  
      var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));
  
      function activity(name) {
          var self = this;
          self.Name = name;
      }
  
      // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
      var viewModel = {
          firstName: ko.observable(initialData.Person.FirstName),
          lastName: ko.observable(initialData.Person.LastName),
          activities: ko.observableArray(initialData.Person.Activities),
  
          removeActivity : function(activity) {
  
              viewModel.activities.remove(activity);
          },
  
          addActivity : function() {
              viewModel.activities.push(new activity(""));
          },
  
          save: function() {
  
              $.ajax({
                  type: "POST",
                  url: "/Home/Index",
                  data: ko.toJSON({ Person: viewModel }),
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function(data) {
                      $("#resultCount").html(data);
                  }
              });
          }
      };
  
      // Activates knockout.js
      ko.applyBindings(viewModel);
  
      $("form").validate({ submitHandler: viewModel.save });
  &lt;/script&gt;
  </code></pre>
  
  <p>HomeController:</p>
  
  <pre><code>    using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using Ahb.Insite.HerdRegistration.WebUI;
  using MvcApplication3.Models;
  using MvcApplication3.ViewModels;
  
  namespace MvcApplication3.Controllers
  {
      public class HomeController : Controller
      {
          public ActionResult Index()
          {
              var person = new Person {FirstName = "John", LastName = "Cool"};
  
              person.Activities = new List&lt;Activity&gt; { new Activity { Name = "Skiing" } };
  
              var personViewModel = new PersonViewModel  { Person = person };
  
              return View(personViewModel);
          }
  
          [HttpPost]
          public ActionResult Index(PersonViewModel personViewModel)
          {
              //Save it
  
              return View();
          }
      }
  }
  </code></pre>
  
  <p>So when I click submit I get the required field message appearing for firstname and lastname if they are blank. The problem is even if there is a required field missing the save method on the viewModel still gets called.</p>
  
  <p>Anyone know how to fix?</p>