MVC의 JQuery와 유효성 검사

Question

나는 다음과 같은 코드가 있습니다

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(); 
     } 
    } 
} 

을 제출을 클릭하면 비어있는 경우 성 및성에 필수 필드 메시지가 나타납니다. viewModel에서 save 메소드가 누락 된 필수 입력란이있는 경우에도 여전히 문제가 발생합니다.

누구나 수정 방법을 알고 계십니까?

Answer 1

data-bind="submit: save"을 양식에서 삭제 해보세요.

녹아웃 바인딩이 jQuery 유효성 바인딩 전에 바인딩되기 때문에 먼저 저장 코드를 누르기 만하면됩니다.

knockout은 양식 요소에 데이터 바인딩이 없으므로 example이 jQuery 유효성 검사를 사용합니다.

업데이트 : I confirmed 예제에 해당 데이터 바인딩 특성을 추가하여 문제를 재현 할 수 있습니다.