knockout.js 验证文本框突出显示答案

【问题标题】：knockout.js validation textbox highlightknockout.js 验证文本框突出显示
【发布时间】：2013-08-30 06:41:54
【问题描述】：

我正在使用验证，并且正在使用 knockout.js（和 durandal.js）作为视图模式。

如果我点击提交按钮，我想让文本框的边框在空白时变为红色。

当用户开始在文本框中输入内容时，应移除红色边框。

我所做的是：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/knockout.debug.js"></script>
    <script src="Scripts/knockout.js"></script>
    <script src="Scripts/knockout.validation.debug.js"></script>
    <script src="Scripts/knockout.validation.js"></script>
</head>
<body>
    <input type="text" data-bind='value: username' />
    <br />
    <button data-bind="click: submit">Submit</button>
    <div data-bind="visible: showErrors, text: errors" />
    <script>
        function ViewModel() {
            var self = this;
            self.username = ko.observable().extend({
                required: true
            });
            self.showErrors = ko.observable(false);

            self.submit = function () {
                self.showErrors(true);
                if (self.isValid()) {
                    // save data here   
                }
            }

            self.errors = ko.validation.group(self);
        }

        ko.validation.init({
            registerExtenders: true,
            messagesOnModified: true,
            insertMessages: false
        });

        ko.applyBindings(new ViewModel());
    </script>
</body>
</html>

【问题讨论】：

嗯，这里没有看到任何杜兰达尔。我可以建议您删除标签并更新问题吗？

标签： javascript knockout.js knockout-validation

【解决方案1】：

Knockout Validation 为您的 observable 添加了两个 observable：isValid 和 isModified。您可以使用 isValid observable 来获取您要查找的内容。我稍微修改了 Bradley Trager 提供的 jsfiddle：

http://jsfiddle.net/tBcRD/3/

基本上data-bind属性改变如下：

<input type="text" data-bind="value: username, valueUpdate: 'afterkeydown', css:{'error':(!username.isValid() && showErrors())}" />

【讨论】：

谢谢，我们不能用吗？ github.com/Knockout-Contrib/Knockout-Validation/wiki/…，这里有一些选项

【解决方案2】：

您可以使用敲除 css 绑定向您的输入框添加错误类：

<input type="text" data-bind="value: username, css:{'error':showErrors}" />

这里是 jsFiddle：http://jsfiddle.net/bradleytrager/tBcRD/

补充：如果您希望它在用户键入时删除突出显示，一种方法是在按键事件中更新您的 observable，并订阅您的 observable，以便在 observable 更改时删除错误消息： HTML：

<input type="text" data-bind="value: username, css:{'error':showErrors}, valueUpdate: 'afterkeydown'" />

JS：

self.username.subscribe(function () {
    self.removeErrors();
});
self.removeErrors = function () {
    self.showErrors(false);
};

我用这个功能更新了 jsFiddle。

【讨论】：

对，但是我想要..当用户开始在 texbox 中输入时，应删除红色边框颜色。并且没有验证消息，例如：此字段是必需的。（仅红色突出显示）
顺便说一句，我使用 parsley.js(parsleyjs.org)。它可以轻松完成所有这些事情。

【解决方案3】：

您可以为此使用validationElement 绑定 (wiki)：

http://jsfiddle.net/tBcRD/10/

HTML：

<input type="text" data-bind="value: username, validationElement: username, valueUpdate: 'afterkeydown'" />
<br/>
<button data-bind="click: submit">Submit</button>

JS：

function ViewModel() {
    var self = this;
    self.username = ko.observable().extend({
        required: true
    });

    this.validationModel = ko.validatedObservable({
        username: self.username
    }); 

    self.submit = function () {
        self.username.valueHasMutated();
        if (this.validationModel.isValid()) {
           alert("data saved");
        }
    }
}

ko.validation.init({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: false,
    decorateElement: true
});

ko.applyBindings(new ViewModel());

CSS：

.validationElement {
    border: 1px solid red;
}

【讨论】：

这只是你的代码。看看这个：stackoverflow.com/a/13042280/932282。我已经更新了小提琴：jsfiddle.net/tBcRD/8.
感谢您的回复，我只做了 2 步：第 1 步：打开链接（jsfiddle）第 2 步：单击提交按钮，我没有将文本框边框设置为红色，您几乎做到了我的工作，很好，但我遇到了这个问题
这确实是验证插件的一个缺点。您可以在属性上调用 valueHasMutated()，请参阅：jsfiddle.net/tBcRD/10
哇，你的例子对我来说很好:)，我在页面上有 10 个字段，我需要为每 10 个字段编写 valueHasMutated() 吗？这会导致性能问题吗？你建议什么作为最好的验证工具（在我的例子中）？
恐怕是这样。由于这个缺点，我改用 jquery.validate.js。不过，您可以遍历验证模型的所有属性。