css - 在 knockout validation 错误或成功时添加或删除元素

Question

我有一个 konockout 验证:

define([
    "jquery",
    "knockout",
    "knockout.validation",
    "inte/accdevice"
], function ($, ko, validation) {
    return function (model, getzipcodeurl) {
        $(function () {

            ko.validation.registerExtenders();


            function ViewModelprofile() {
                var self = this;
                self.firstName = ko.observable(model.FirstName).extend({ required: { message: errors} });
                self.updating = ko.observable(true);
            };

            var vms = new ViewModelprofile();


            vms.errors = ko.validation.group(vms);

            ko.applyBindingsWithValidation(vms, document.getElementById('infosBlocEdit'), { messagesOnModified: true });
        });
    };
});

这是我的 HTML:

 <input id="FirstName" name="FirstName" type="text" value="@Model.FirstName" data-bind="value: firstName" maxlength="19" />
                        <span class="errorMsg" data-bind="validationMessage: firstName"></span>

实际上，当出现错误时，我会显示:<span class="errorMsg" data-bind="validationMessage: firstName">errors</span>

我需要在每个元素验证出错和成功时个性化 css:

出错时我需要显示:<span class="invalidLine">
<span class="bble">&nbsp;</span>
<span class="bbleTxt">errors</span>
</span>

成功后:<span class="validLine"></span>

我该怎么做？

Answer 1

如果我正确地理解了这个问题，并且从我所看到的你使用 knockout validation 的情况来看，你需要类似的东西:

<span class="invalidLine" data-bind="visible: !firstName.isValid()">
    <span class="bble">&nbsp;</span>
    <span class="bbleTxt">errors</span>
</span>
<span class="validLine" data-bind="visible: firstName.isValid()"></span>