Knockout + jquery验证

Question

我试图设置验证与jquery验证，并且我有从服务器回来的viewmodel，映射到客户端，并成功地淘汰js绑定一些数据。

我包含一个调用来验证，但验证从不触发，但是如果我把一个类放在输入框上，然后调用有效它触发器按预期。

任何想法？

<script type="text/javascript"> 
     var viewModel; 
     $(document).ready(function() { 
      $.ajax({ 
       url: 'Home/GetUserData', 
       type: 'post', 
       success: function (data) { 
        viewModel = ko.mapping.fromJS(data); 
        viewModel.save = function() { sendToServer(); }; 
        ko.applyBindings(viewModel); 
        main(); 
       } 
      }); 
     }); 

     function main() { 
      $("form").validate({ 
       rules: { 
        birthPlace: { 
         required: true, 
         minlength: 2 
        } 
       } 
      }); 
     } 

     function sendToServer() { 
      alert($("form").valid()); 
     } 

    </script> 
} 
<h2>@ViewBag.Message</h2> 
<form id="nameSubmit" action=""> 
    <div> 
     The name is: <span id="test" data-bind="text: Name"></span> 
    </div> 
    <div> 
     He's <span id="age" data-bind="text: Age"></span> 
    </div> 
    <div> 
     He's from 
     <input type="text" id="birthPlace" name="birthPlace"/> 
    </div> 
    <div> 
     <button data-bind="click: save">Click Me</button> 
    </div> 
</form> 

Answer 1

默认情况下，jQuery验证是否验证提交。因此，如果淘汰赛中断了这一点，即不会实际触发事件，那么就可以做到这一点。你最好的选择可能会做，因为你有些在sendToServer功能规划有 - 手动触发从淘汰赛验证提交事件：

if (!$('form').valid()){ 
    $('form').showErrors(); 
    return false; 
} 

//otherwise, get on with whatever knockout needs to do 
... 
return true; 

Answer 2

我一直在使用submitHandler选项上的validate（）：

$("#myform").validate({ 
submitHandler: function(form) { 
    viewModel.sendToServer() 
} 
}); 

在窗体上，只需要使用标准的<input type="submit">，jQuery验证会选取事件并进行验证，如果有效，将在viewModel上调用您的处理程序。

Answer 3

现在有一个淘汰赛jQuery的验证结合，我觉得这是非常有用的：

https://github.com/Knockout-Contrib/Knockout-Validation

Answer 4

我想建议不要使用jQuery验证具有淘汰赛。原因是jQuery验证绑定到DOM，而淘汰赛建议使用视图模型。一旦您开始在验证中添加更多的依赖关系，例如在数据无效的情况下阻止某些行为，但仍需要保留数据，这会导致问题。去knockout validation，它做得很好。

Answer 5

jQuery Validation仅对表​​单提交事件进行验证（按照Ryley的回答），这是正确的。所以如果你使用敲除风格data-bind="click:modelSubmit"这将阻止表单提交（默认情况下），所以阻止jQuery验证做任何事情。

您有两种选择。首先是从modelSubmit()返回true，这将使得Knockout fire的表单提交（但modelSubmit完成后只有）（http://knockoutjs.com/documentation/click-binding.html）。

第二个 - 也可能是你想要的 - 就是完全放弃data-bind="click"并改用jQuery验证提交处理程序（https://jqueryvalidation.org/validate）。

$("#myform").validate({ 
    submitHandler: function(form) { 
     viewModel.modelSubmit(); 
    } 
}); 

该处理程序只在验证成功后才会被调用。