knockout.js observableArrayで検証し、すべての項目を要求する（空のフィールドなし）

Question

次のノックアウトの使用例を書いた。

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は観測できないため、上記の例では更新をトリガーしません。