녹아웃 유효성 검사가 필수 항목에서 작동하지 않습니다.

Question

저는 Knockout에 매우 익숙하며, Knockout 유효성 검사를 사용하는 것이 더 새롭습니다. 양식을 제출하는 것을 방지해야하는 간단한 입력이 있습니다. 여전히 빈 입력으로 제출합니다. 내가 뭘 잘못하고 있는지 모르겠다.

나는 here을 만들었습니다. 테스트하려면 커서가 마지막 소매 입력에있을 때 탭을 누르십시오. 그러면 새 빈 줄이 추가됩니다. 그런 다음 제출을 클릭하고 콘솔을보십시오. 나는 당신의 바이올린 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

: 여기 내 자바 스크립트 코드입니다. 귀하의 문제는 그룹화 할 때의 구성 때문이었습니다. { deep: true }을 추가해야 유효성이 검사 된 모든 관찰 대상에서 유효성 검사가 실행됩니다. live: true을 추가하면 배열에 새 항목을 추가 할 때 유효성 검사가 실행됩니다. 당신은 클릭 이벤트에 대한 녹아웃을 사용할 수 있습니다 그리고 내가 가서 얻을에서 모든 항목에 유효성 검사를 추가 매핑 라이브러리를 사용

제출 -

1. 어떤 JQuery와 필요 없음을 : 어떤 다른 것들주의합니다.

희망 사항은 문제를 해결하는 데 도움이됩니다.

업데이트

체크 아웃 구성에 대한 자세한 내용은 코 검증 문서 here

업데이트 2

은 당신의 코멘트에있는 당신의 질문에 대답하려면 다음의 mapping 플러그인을 살펴 그것이 작동하는 방법을 알아내는 녹아웃 (검증보다 조금 더 문서화되어 있습니다.) create을 사용하여 매핑을 인터셉트하여 조작 할 수 있습니다 결과적으로 생성되는 ViewModel options.data에는 관측 가능으로 매핑되기 전에 매핑 한 데이터가 포함되어 있습니다. 그것에 대해 배우는 가장 좋은 방법은 문서를 읽은 다음 천천히 단계별로 실행하여 읽는 것입니다.