在按钮单击时调用 Knockout Validation Extender答案

【问题标题】：Call Knockout Validation Extender on Button Click在按钮单击时调用 Knockout Validation Extender
【发布时间】：2016-08-08 15:11:03
【问题描述】：

我一直在阅读许多关于如何在按钮单击事件上调用淘汰验证扩展程序的问题。但是所有接近回答问题的答案都涉及使用敲除验证库的解决方法。我没有使用淘汰赛验证库。我要做的就是使用敲除扩展器中定义的验证规则验证按钮单击事件上的输入字段。

为简单起见，我将使用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>

如何触发按钮点击事件的验证并在未通过验证时显示验证消息？

【问题讨论】：

如果你只想检查你的输入是否为空，你可以在你的点击绑定中检查它，比如if(!self.userInput())。另外最好将self定义为var self = this ;
@Matt 谢谢，但为了简单起见，我使用了所需的示例。在我的实际代码中，我想做更多涉及的验证规则。

标签： javascript validation knockout.js

【解决方案1】：

我相信您正在查看这里的示例 - http://knockoutjs.com/documentation/extenders.html

您不能直接调用 validate，但订阅会监视值并在更改时运行 validate 函数并更新您可以检查的 observable - 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>

【讨论】：