ノックアウト検証：私は、「送信」ボタンをクリックしたときに、私のフィールドを検証したい<a href="https://github.com/Knockout-Contrib/Knockout-Validation" rel="nofollow">https://github.com/Knockout-Contrib/Knockout-Validation</a></p> <p>、：どのように

Question

ボタンのクリックではなく、入力変化のフィールドを検証するために、私は、次のノックアウトの検証プラグインを使用しています入力の値を変更するたびにではありません。どうやってやるの？

Javascriptを：

ko.validation.init({ 
    insertMessages:false, 
    messagesOnModified:false, 
    decorateElement: true, 
    errorElementClass: 'wrong-field' 
}, true); 

var viewModel = { 
    firstName: ko.observable().extend({minLength: 2, maxLength: 10}), 
    lastName: ko.observable().extend({required: true}), 
    age: ko.observable().extend({min: 1, max: 100}), 
    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); 

HTML：

<fieldset>  
    <div class="row" data-bind="validationElement: firstName"> 
     <label>First name:</label> 
     <input type="text" data-bind="textInput: firstName"/> 
    </div> 

    <div class="row" data-bind="validationElement: lastName"> 
     <label>Last name:</label> 
     <input data-bind="value: lastName"/> 
    </div> 

    <div class="row"> 
     <div class="row"> 
      <label>Age:</label> 
      <input data-bind="value: age" required="required"/> 
     </div> 
    </div> 
</fieldset> 

<fieldset> 
    <button type="button" data-bind='click: submit'>Submit</button> 
    &nbsp; 
</fieldset> 

は、これが私のjsfiddleです：まあhttp://jsfiddle.net/xristo91/KHFn8/6464/

Answer 1

、はいバリデータが時に観測変更クビありません。しかし、...バリデータの唯一のオプションでトリックすることができます。 私はそれがうまくいく方法をFiddler sampleにしました。

ここで問題は、ユーザーがクリックした最初の時間の後に何をしたいか...何よりです....

基本的にサンプルがすべてのバリデータにonlyIf条件を入れ、にvalidateNow観測可能バリデーションを評価する必要があるかどうかを判断します。

self.validateNow = ko.observable(false); 

onlyIfは、すべてのバリデータに基づいて評価されます：

self.firstName = ko.observable().extend({ 
minLength: { 
    message:"minlength", 
    params: 2, 
    onlyIf: function() { 
    return self.validateNow(); 
    } 
}, 

とにvalidateNowのみ

self.submit = function() { 
self.validateNow(true); 

を提出の上に設定されます...私はまた、ビットにデータ・バインディングをrearengedあなたのサンプルは赤いボックスを入力の周りに置くだけなので、

私はサンプルがあなたと同じ「architecure」ではありませんが、私はあなたがあなたのjsfiddleが指定されているように動作するようです