ボタンクリックでノックアウト検証エクステンダーを呼び出す

Question

ボタンクリックイベントでノックアウト検証エクステンダーを呼び出す方法を尋ねる多くの質問を読んできました。しかし、疑問に答えようとするすべての答えには、knockout-validateライブラリを使用した回避策が含まれています。私はknockout-validateライブラリを使用していません。ノックアウトエクステンダーで定義された検証ルールを使用して、ボタンクリックイベントの入力フィールドを検証するだけです。

簡略化のため、私はknockout documentationから必要なエクステンダを使用し、それを簡単なユースケースに適用します。このユースケースでは入力が行われ、ボタンのクリックイベントではユーザーが入力した値で何かが実行されます。または、値が入力されていない場合は、検証メッセージを表示するためにビューを更新します。

ノックアウトコード：

ko.extenders.required = function (target, overrideMessage) { 
    target.hasError = ko.observable(); 
    target.validationMessage = ko.observable(); 

    function validate(value) { 
     target.hasError(value ? false : true); 
     target.validationMessage(value ? "" : overrideMessage || 'Value required'); 
    } 

    return target; 
}; 

function MyViewModel() { 
    self = this; 
    self.userInput = ko.observable().extend({ required: 'Please enter a value' }); 

    /** 
    * Event handler for the button click event 
    */ 
    self.processInput = function() { 
     //Validate input field 
     //How to call the validate function in the required extender? 

     //If passes validation, do something with the input value 
     doSomething(self.userInput()); 
    }; 
} 

マークアップ：私は、ボタンのクリックイベントに検証をトリガーし、それが検証に合格しなかった場合、検証メッセージを表示することができますどのように

<input type="text" data-bind="value: userInput, valueUpdate: 'afterkeydown'" /> 
<span data-bind="visible: userInput .hasError, text: userInput .validationMessage" class="text-red"></span> 
<button data-bind="click: processInput ">Do Something</button> 

？

Answer 1

私はあなたがここでは例を見ていたと考えている - http://knockoutjs.com/documentation/extenders.html

あなたが直接検証を呼び出すことはできませんが、購読は値を監視し、変化に検証機能を実行し、あなたがチェックすることができ、観察更新 - hasErrorを。

ko.extenders.required = function (target, overrideMessage) { 
 
    target.hasError = ko.observable(); 
 
    target.validationMessage = ko.observable(); 
 

 
    function validate(value) { 
 
     target.hasError(value ? false : true); 
 
     target.validationMessage(value ? "" : overrideMessage || 'Value required'); 
 
    } 
 
    
 
    //initial validation 
 
    validate(target()); 
 
    
 
    //validate whenever the value changes 
 
    target.subscribe(validate); 
 
    
 
    //return the original observable 
 
    return target; 
 
}; 
 

 
function MyViewModel() { 
 
    self = this; 
 
    self.userInput = ko.observable().extend({ required: 'Please enter a value' }); 
 

 
    /** 
 
    * Event handler for the button click event 
 
    */ 
 
    self.processInput = function() { 
 
     if(self.userInput.hasError()){ 
 
      console.log('has error'); 
 
     }else{ 
 
      console.log('no error'); 
 
     } 
 
    }; 
 
} 
 

 
// Activates knockout.js 
 
ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<input type="text" data-bind="value: userInput, valueUpdate: 'afterkeydown'" /> 
 
<span data-bind="visible: userInput .hasError, text: userInput .validationMessage" class="text-red"></span> 
 
<button data-bind="click: processInput ">Do Something</button>