Knockout Validation Decorate Element is not Working when html is Loaded dynamically.

[themanojsingh]

I am calling functions like this:

ko.validation.registerExtenders();
ko.validation.init({ decorateInputElement: true, insertMessages: false, errorElementClass:'input-danger' });
ko.applyBindingsWithValidation(viewmodel, document.getElementById("someDIV"));

[crissdev]

@themanojsingh Are you missing decorateElementOnModified: false?

[themanojsingh]

Yes i tried the same but its not working i.e. not decorating the HTML element with given css class.

[crissdev]

Can you provide a fiddle for this? It will make things clear.

[crissdev]

@themanojsingh Just noticed that ko.validation.init is not invoked with force option. Can you confirm that's the problem?

ko.validation.init({/* options */}, true);

[themanojsingh]

Yes ....thats not the problem.....it insert validation message in a span below the html element....but does not decorate the element with css....this happens when you open anything in jQuery popup...or get html on runtime from server

Sent from my Windows Phone

---

From: Cristian Trifanmailto:[email protected] Sent: ‎2/‎14/‎2015 6:02 PM To: Knockout-Contrib/Knockout-Validationmailto:[email protected] Cc: themanojsinghmailto:[email protected] Subject: Re: [Knockout-Validation] Knockout Validation Decorate Element is not Working when html is Loaded dynamically. (#543)

@themanojsingh Just noticed that ko.validation.init is not invoked with force option. Can you confirm that's the problem?

ko.validation.init({/* options */}, true);

---

Reply to this email directly or view it on GitHub: https://github.com/Knockout-Contrib/Knockout-Validation/issues/543#issuecomment-74373307

[crissdev]

Working fiddle http://jsfiddle.net/uzjbqu4d/

---

@themanojsingh Did it work for you?

[andrewflierman]

Have the same issue:

ko.validation.init({
    decorateInputElement: true,
}, true);

And my html (dynamic loaded within my Durandal spa) looks like:

<div class="form-group">
    <label class="col-sm-1 control-label" for="firstName">Firstname</label>
    <div class="col-sm-4 col-2">
        <input type="text" class="form-control" id="firstName" name="firstName" data-bind="value: firstName">
     </div>
</div>

[crissdev]

@awflierman Can you create a jsfiddle for this issue?

[andrewflierman]

@crissdev sorry can't reproduce this because I'm using Durandal and I don't know how to reproduce the view (with all the composition lifecycle stuff) in jsfiddle. Any ideas?

@themanojsingh have a working jsfiddle for dynamic content though: http://jsfiddle.net/vhLc0ov9/

[crissdev]

Try searching for properties added by Knockout Validation, e.g isValid, isModified, error. Retrieving all bindings attached to the element might help as well.

var element = document.querySelector('#firstName');
var bindings = ko.bindingProvider.instance.getBindings(element, ko.contextFor(element));
console.log(bindings);

[maroy1986]

Same issue here with Durandal. First time we load the page everything's fine. If you navigate away and come back, it's all broken and the validation doesn't work anymore.

It's impossible for me to provide any fiddle since the application is quite large and as @awflierman said, it may be impossible to reproduce in jsfiddle since durandaljs require a structure...

Anyway, the issue seems to have arise following the update to the version 2.0.2. We were previously using version 1.0.2. We never notice that bug before. It happen in a very specific situation. Here's some steps to reproduce in a DurandalJS Application :

1. Go to a page where you use KV
2. Go to any other application page
3. Go back to the page you were on step 1. Validation no longer work.

If you reload the entire application, using F5, it's all working again.

Hope this can help nail the problem.

[crissdev]

Thanks @maroy1986

I tried reproducing this issue by creating a Durandal based application using the starter kit they provide. I updated app/main.js to configure knockout-validation dependency, added some validation to app/viewmodels/welcome.js and some styling to css/starterkit.css.

Unfortunately I couldn't reproduce the issue so I presume there's something related to how your application is initialized (?).

I created a repository for this issue just in case someone has an idea on how to reproduce this issue. You can also test the application using rawgit. Here are the details

Repo: https://github.com/crissdev/kvd Demo: http://cdn.rawgit.com/crissdev/kvd/master/index.html

[maroy1986]

@crissdev Well, our scenario is way more complicated than this one... We also use ASP.NET Razer underneath to handle some generation in our views such as translation and data attributes. We have a binding that take care of reading data attributes rendered by Razer and then extend the associated property with KV stuff for the appropriate validator. I don't think the issue is on the razer side though.

I'll try to beef up your sample with a snippet of our validate binding so you can have a better idea of it.

I have to admit, we probably to something wrong, but after further testing, we established that there might really be a bug on the KV side. We tried the 2.1.0 version which seems to be kind of "alpha" and the problem didn't go away but some other things start to work properly. Kind of weird I know...

So there we are. I'll try to reproduced the issue with your sample and get back to you.

Thanks for your help!

[crissdev]

@maroy1986 Are you using some sort of caching for the views or changing some nested view model? If that's the case then this might be related to #398

---

Any sort of info you can provide would be very helpful. Thanks.

[maroy1986]

@crissdev Yes we actually cached the html rendered by Razor for a short period of time. I just tried disabling that cache with no change after all :( .

We made some progress on this today but still not find the problem. The problem always happen when you navigate to the page the second time. On first time, everything's fine. On the second time, everything is broken. Given what I found with my colleague today, it seems that on the second time, KV doesn't refresh his group (aka ko.validation.group) which doesn't trigger the generation of the "validationmessage" span's. On the other side, we have a custom computedObservable name "PageIsValid" that return a boolean to know if everything on the page is valid, that one still work perfectly. This one allow us to disable butttons when the form is not totally valid. That means that, somehow, the values are properly extended but KV doesn't do his magic of generating the spans.

Unfortunately, I didn't had the time to modify the durandal starter kit you provide. I'll try to have it done by the beginning of next week.

To be honest, the more we advance on this, the more it looks to be something wrong on our side and the way we use/extend KV. That's why I absolutely want to try it on your start kit repo to confirm this. I'll keep you post on this.

Thanks!

[crissdev]

@maroy1986 Have you find anything that might help us solve this issue? You mentioned about the group not updating. In the newest version of the library there's an internal method _updateState (available on the result returned by the group method) which can force an update of the group. If there's anything I can help you with just let me know.

Thanks.

[Qvatra]

Had the same issue, the following helped:

ko.validation.init({ insertMessages: true, errorElementClass: 'has-error', errorMessageClass: 'help-block', decorateInputElement: true }, true);

[pm7y]

I had this issue too and it went away when I stopped referencing knockout.mapping-latest.debug.js from nuget and changed to knockout.mapping-latest.js.

[piwidev789]

I have met the same issue recently. I have resolved it by adding a new method to ko.validation api : applyBindingsToNodeWithValidation. It takes a bindings object as parameter and applies them dynamically. The existing one (ko.applyBindingsWithValidation) assumes that your already have some bindings decorating your DOM element.

ko.applyBindingsToNodeWithValidation = function (viewmodel, bindings, rootNode, options) {

    var node = document.body,
        config;

    if (rootNode && rootNode.nodeType) {
        node = rootNode;
        config = options;
    }
    else {
        config = rootNode;
    }

    kv.init();

    if (config) {
        config = extend(extend({}, kv.configuration), config);
        kv.utils.setDomData(node, config);
    }

    ko.applyBindingsToNode(node, bindings, viewmodel);
};

Here is the params description :

• viemodel : your view model
• bindings : the bindings you wish to apply to the DOM element. e.g. { validationElement: someObservable}
• rootNode : your DOM element
• options : ko validation options e.g. { decorateInputElement: true, insertMessages: false }