Add or remove element on knockout validation error or succes

Question

I have a konockout validation:

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

This is my 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>

Actually when there is an error i show:<span class="errorMsg" data-bind="validationMessage: firstName">errors</span>

I need to personalize css on error and on success on each element validation:

On error i need to show this:<span class="invalidLine"> <span class="bble">&nbsp;</span> <span class="bbleTxt">errors</span> </span>

and on succes:<span class="validLine"></span>

How can I do this?

Answer 1

If I understand the question correctly and from what I see you use knockout validation, you need something like:

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