Question

I have the following code:

Index.cshtml:

    @using System.Web.Script.Serialization
@model MvcApplication3.ViewModels.PersonViewModel
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<form class="transferListEditor" data-bind="submit: save">

    <p>First name: <input class='required' data-bind="value: firstName, uniqueName: true" /></p>
    <p>Last name: <input class='required' data-bind="value: lastName, uniqueName: true" /></p>

    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: activities">
            <tr>
                <td><input data-bind="value: Name" /></td>
                <td><a href="#" data-bind="click: $root.removeActivity">Remove</a></td>
            </tr>    
        </tbody>
    </table>
    <button data-bind="click: addActivity">Add activity</button>
    <button type="submit">Submit</button>
</form>

<script type="text/javascript">

    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 });
</script>

HomeController:

    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<Activity> { new Activity { Name = "Skiing" } };

            var personViewModel = new PersonViewModel  { Person = person };

            return View(personViewModel);
        }

        [HttpPost]
        public ActionResult Index(PersonViewModel personViewModel)
        {
            //Save it

            return View();
        }
    }
}

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.

Anyone know how to fix?

Answer 1

Try removing data-bind="submit: save" on the form.

Since the knockout bindings are being bound before the jQuery validation binding, it could just be hitting the save code first.

I notice the example of using jQuery validation with knockout doesn’t have a data-bind on the form element.

Update: I confirmed I could reproduce your problem by adding that data-bind attribute to the example.