knockout.js observableArray에서 유효성을 검사하여 모든 항목 필요 (빈 필드 없음)

Question

다음 knockout 사용 예제를 작성했습니다.

HTML

<script id="customMessageTemplate" type="text/html"> 
    <em class="customMessage" data-bind='validationMessage: field'></em> 
</script> 
<fieldset> 
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend> 
    <label>First name: <input data-bind='value: firstName'/></label> 
    <label>Last name: <input data-bind='value: lastName'/></label>  

    <table> 
    <thead> 
     <tr><th>Value</th></tr> 
    </thead> 
    <tbody data-bind="foreach: captcha"> 
     <tr> 
      <td><input data-bind="value: value" type="test" /></td> 
     </tr> 
    </tbody> 
</table> 

<button type="button" data-bind='click: submit'>Submit</button> 

개편, 나는 평소 관찰 개체가 입력 reffrering 같은 동일한 방법으로 제시 예에서 이름 및 성 필드이 배열의 모든 항목을 요구하는 observableArray에 추가해야합니까

ko.validation.rules.pattern.message = 'Invalid.'; 


ko.validation.configure({ 
    registerExtenders: true, 
    messagesOnModified: true, 
    insertMessages: true, 
    parseInputAttributes: true, 
    messageTemplate: null 
}); 


var captcha = function (val) { 
    return val == 11; 
}; 

var mustEqual = function (val, other) { 
    return val == other(); 
}; 

var viewModel = { 
    firstName: ko.observable().extend({ required: true }), 
    lastName: ko.observable().extend({ required: true }), 
    captcha: ko.observableArray([{value: "test"}]), 


    submit: function() { 
     if (viewModel.errors().length == 0) { 
      alert('Thank you.'); 
     } else { 
      alert('Please check your submission.'); 
      viewModel.errors.showAllMessages(); 
     } 
    } 
}; 


viewModel.errors = ko.validation.group(viewModel); 

ko.applyBindings(viewModel); 

?

Answer 1

내가 기대하는 바가 확실하지 않습니다. 당신이 observableArray의 각 개체에 유효성 검사를 추가하려는 경우, 당신은 같은 것을 할 수 있습니다

var captchaViewModel = function(val) { 
    this.value = ko.observable(val).extend({ 
    required: true 
    }); 
// other properties if any 
} 

이 그런 다음 viewModel에 변경

가 captchaViewModel 기능을 작성하고 value 속성에 required 유효성 검사를 추가 :

var viewModel = { 
    firstName: ko.observable().extend({ required: true }), 
    lastName: ko.observable().extend({ required: true }), 
    captcha: ko.observableArray([new captchaViewModel("test")]), 

    submit: function() { 
    if (viewModel.errors().length == 0) { 
     alert('Thank you.'); 
    } else { 
     alert('Please check your submission.'); 
     viewModel.errors.showAllMessages(); 
    } 
    } 
}; 

는 또한 configuration에 grouping 속성을 추가 할 필요 deep: true을 설정합니다.

ko.validation.configure({ 
    ....... 
    ....... 
    // "deep" indicates whether to walk the ViewModel (or object) recursively, 
    // or only walk first-level properties 
    grouping: { deep: true } 
}); 

Here's a fiddle for testing

Answer 2

당신은 너무처럼 custom validation rule를 추가 할 수 있습니다

ko.validation.rules['noEmptyValues'] = { 
    validator: function (arr) { 
     return arr.every(function(v) { 
      return v && v.value; // TODO: confirm this is the test condition 
     }); 
    }, 
    message: "Array contains empty items" 
}; 

// Some place else: 
var arrayThatCannotContainEmptyValues = ko.observableArray([]) 
    .extend({ noEmptyValues: true }); 

이 테스트는 // TODO 라인에 있어야 정확히 분명하지 않다,하지만 난 당신이 그것을 알아낼 수 있습니다 확신합니다.

실제 배열을 수정할 때만 작동한다는 점에 유의하십시오. value은 관찰 할 수 없으므로 위의 예에서 업데이트를 트리거하지 않습니다.