基因敲除驗證不適用於所需項目

Question

我對Knockout非常陌生，甚至使用Knockout驗證更新。我有一些簡單的必要輸入，應該防止提交表單。它仍然提交空輸入。我不確定我做錯了什麼。

我創建了一個小提琴here。要進行測試，請在光標位於上次零售輸入時點擊選項卡。這將添加一個新的空白行。然後點擊提交併查看控制檯。 這裏是我的javascript代碼：

var viewModel; 

ko.validation.rules.pattern.message = 'Invalid.'; 
ko.validation.init({ 
    registerExtenders: true, 
    messagesOnModified: true, 
    insertMessages: true, 
    parseInputAttributes: true, 
    messageTemplate: null 
}, true); 

var itemModel = function() { 
    var self = this; 
    self.itemNo = ko.observable().extend({required: true}); 
    self.brocCode = ko.observable().extend({required: true}); 
    self.itemDesc = ko.observable().extend({required: true}); 
    self.retail = ko.observable().extend({required: true}); 
} 

var itemsModel = function(items) { 
    var self = this; 
    //self.items = ko.observableArray(items); 

    self.items = ko.mapping.fromJSON(items); 

    self.checkItemNo = function(data) { 
    console.log("blurred!"); 
    var itemNo = "abc"; 
    if (itemNo != "") { 
     var item = ""; 
     /* 
     $.each(fullItemList, function(i, v) { 
     if (v.No.search(itemNo) != -1) { 
     item = v.Description; 
     return; 
     } 
     }); 
     if(item != "") { 
     console.log("found: " + item); 
     var match = ko.utils.arrayFirst(self.items, function(item) { 
     return itemNo === item.itemNo; 
     }); 
     */ 
     var match = false; 
     item = "Mudguard front"; 
     if (!match) { 
     console.log("not a match!"); 
     console.log(data); 
     data.itemDesc(item); 
     } 
    } 
    } 

    self.addLine = function() { 
    self.items.push(new itemModel()) 
    }; 

    self.removeItem = function(item) { 
    self.items.remove(item); 
    }; 

    self.errors = ko.validation.group(self.items); 
}; 

ko.bindingHandlers.enterPress = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    var allBindings = allBindingsAccessor(); 
    element.addEventListener('keydown', function (event) { 
     var keyCode = (event.which ? event.which : event.keyCode); 
     if (keyCode === 13 || (!event.shiftKey && keyCode === 9)) { 
     event.preventDefault(); 
     console.log("hit enter/tab!"); 
     bindingContext.$root.addLine(); 
     return false; 
     } 
     return true; 
    }); 
    } 
}; 

function GetItems() { 
      //var itemsJSON = @Html.Raw(Json.Encode(Model.brochureItems)); 
      var itemsJSON = '[{"brochureId":1,"itemNo":"1000","brocCode":"1000","itemDesc":"Bicycle","retail":13.5},{"brochureId":1,"itemNo":"1100","brocCode":"1100","itemDesc":"Front Wheel","retail":35},{"brochureId":1,"itemNo":"1120","brocCode":"1120","itemDesc":"Spokes","retail":12.5},{"brochureId":1,"itemNo":"1150","brocCode":"1150","itemDesc":"Front Hub","retail":5},{"brochureId":1,"itemNo":"1151","brocCode":"1151","itemDesc":"Axle Front Wheel","retail":14},{"brochureId":1,"itemNo":"120","brocCode":"120","itemDesc":"Loudspeaker, Black, 120W","retail":12.5},{"brochureId":1,"itemNo":"125","brocCode":"125","itemDesc":"Socket Back","retail":10}]'; 
      viewModel = new itemsModel(itemsJSON); 
      ko.applyBindings(viewModel); 
     } 

$(document).ready(function() { 
    GetItems(); 

    $('#brochureForm :submit').on('click', function(e) { 
    e.preventDefault(); //prevent form from submitting 

    if (viewModel.errors().length === 0) 
     //if(viewModel.validationModel.isValid()) 
    { 
     console.log("submitting!"); 
     //$("#brochureForm").submit(); 
    } 
    else 
    { 
     console.log("not valid!"); 
    } 
    }); 
}); 

Answer 1

我已經更新了你的提琴https://jsfiddle.net/q7ahfzut/2/。你的問題只是由於分組時的配置。您需要添加{ deep: true }這將導致驗證在所有驗證的觀測值上運行。您可以添加live: true，這會在將新項目添加到陣列時導致驗證運行。其他一些注意事項：

1. 無需任何jQuery的 - 你可以使用淘汰賽click事件，並提交
2. 我使用的映射庫添加驗證從一開始走的所有項目。

希望能幫助你解決問題！

更新

Checkout作爲配置的詳細信息，KO驗證文件here

更新2

爲了回答您的評論你的問題：看看該mapping插件找出它是如何工作的（它的記錄比驗證要好一些。你可以用create來攔截映射以便操縱得到的ViewModel。 options.data包含您在映射到observable之前映射的數據。瞭解它的最佳方式是閱讀文檔，然後慢慢地逐步瀏覽文檔。