ノックアウト検証で必要な項目が処理されない

Question

私はノックアウトの新機能で、ノックアウト検証機能を使用するのに新しい機能です。私はフォームを提出するのを防ぐ必要がある簡単な入力をいくつか持っています。依然として空の入力とともに送信されます。私は何が間違っているのか分かりません。

私はフィドルを作成しましたhere。テストするには、カーソルが最後の小売入力にあるときにタブを押します。それは新しい空白行を追加します。その後、submitを押してコンソールを見ます。私はあなたのフィドルhttps://jsfiddle.net/q7ahfzut/2/を更新しました

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

： はここに私のjavascriptのコードです。あなたの問題は、単にグループ化するときの設定によるものでした。 { deep: true }を追加する必要があります。これにより、検証されたすべての観測対象に対して検証が実行されます。 live: trueを追加すると、配列に新しい項目を追加するときに検証が実行されます。注意すべきいくつかの他の事：

1. 任意のjqueryのための必要はありません - あなたはクリックイベントのためにノックアウトを使用して
2. 私が行く取得からすべての項目に検証を追加するマッピングライブラリを使用し提出することができます。

あなたの問題にお役立てください。

更新

チェックアウトの設定の詳細についてはKO検証ドキュメントhere

アップデート2

はあなたのコメントにあなたの質問に答えるために：用mappingプラグインを見てみましょうそれがどのように動作するかを調べるためのノックアウトです（検証よりも文書化されています）。createを使ってマッピングをインターセプトして操作することができます結果のViewModelを返します。 options.dataには、それが観測可能にマッピングされる前にマッピングされているデータが含まれています。それについて学ぶ最善の方法は、ドキュメントを読んでゆっくりとそれを踏んで遊ぶことです。