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

該處理程序只在驗證成功後纔會被調用。