Call Knockout Validation Extender auf Knopfdruck

Question

Ich habe viele Fragen gelesen, die fragen, wie man einen Knockout-Validierungs-Extender bei einem Button-Klick-Ereignis aufruft. Aber alle Antworten, die der Beantwortung der Frage nahe kommen, beinhalten Problemumgehungen mit der Knockout-Validate-Bibliothek. Ich verwende nicht die Knockout-validate-Bibliothek. Alles, was ich tun möchte, ist ein Eingabefeld für ein Button-Click-Event zu validieren, das die in einem Knockout-Extender definierten Validierungsregeln verwendet.

Der Einfachheit halber verwende ich den benötigten Extender aus der knockout documentation und verwende ihn für einen einfachen Anwendungsfall. Dieser Anwendungsfall nimmt eine Eingabe und auf ein Button-Klick-Ereignis tut etwas mit dem Wert, den der Benutzer eingegeben hat. Oder aktualisiert die Ansicht, um die Validierungsnachricht anzuzeigen, wenn kein Wert eingegeben wurde.

Knockout-Code:

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()); 
    }; 
} 

Markup:

<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> 

Wie kann ich die Validierung auf die Schaltfläche Click-Ereignis und zeigen die Prüfungsmeldung auslösen, wenn es Gültigkeitsprüfung nicht ?

Answer 1

Ich glaube, Sie am Beispiel hier waren auf der Suche - http://knockoutjs.com/documentation/extenders.html

Sie können nicht direkt aufrufen validieren, aber die Uhren den Wert abonnieren und führt die Prüf-Funktion auf Änderung und aktualisiert eine beobachtbare Sie überprüfen können - 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>