挖空验证:如何在按钮单击时验证字段，而不是在输入更改时验证字段

Knockout Validation: how to validate the fields on button click, not on input change

本文关键字：验证 字段 输入 单击 按钮      更新时间：2023-09-26

我正在使用以下淘汰验证插件：https://github.com/Knockout-Contrib/Knockout-Validation

我想在单击"提交"按钮时验证我的字段，而不是每次更改输入值时都验证我的字段。我该怎么做？

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/

嗯，是的，当可观察量发生变化时，验证器确实会被触发。但。。。您可以使用验证器的onlyIf 选项来欺骗它们。我做了一个小提琴手样本，它是如何工作的.

这里的问题更多...用户第一次单击后，您想做什么....

基本上，样本向所有验证器放置一个 onlyIf 条件，而 validateNow 可观察性决定了验证器何时应该评估。基本上如你所愿...在提交方法中。

self.validateNow = ko.observable(false);

唯一如果在所有验证器上进行评估：

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

并且验证现在仅在提交时设置

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

。我还稍微重新设置了数据绑定，因为您的示例仅在输入上放置了红色框。

我习惯于使用构造函数创建我的闭包。所以样本和你的"架构"不一样，但我想你会理解它

相关文章：