bootstrap-wysihtml5 knockout.validation

Question

I am trying to set up knockout validation for a wysihtml5 control. Currently I have following code:

<div>
   <textarea data-bind="wysihtml5: { data: Text, options: { 'font-styles': false, 'link': false, 'image': false, 'html': true } }"></textarea>
</div>

and the viewModel:

 viewModel.Text.extend({ required: true });
 viewModel.saveValidationGroup = ko.validatedObservable({
            Text: viewModel.Text
        });
viewModel.save = function () {
            if (!viewModel.saveValidationGroup.isValid()) {
                viewModel.saveValidationGroup.errors.showAllMessages();
                return false;
            } else {
                console.log(ko.toJSON(viewModel.Text));
            }
        };

When you run the app, the control loads properly, and when the textarea is empty, there is still set for Text viewmodel Property:

<span id=\"_wysihtml5-undo\" class=\"_wysihtml5-temp\"></span><span><br><ul>    </ul>  </span>

Question is what is the proper way of integrating the wysihtml5 control with knockout.validation.

Edit: Custom Binding

ko.bindingHandlers.wysihtml5 = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {

        var options = {};
        var value = ko.utils.unwrapObservable(valueAccessor()) || {};

        options.events = {
            "change": function () {
                var observable;
                var content = ko.utils.unwrapObservable(valueAccessor()) || {};

                if (content.data != undefined) {
                    observable = valueAccessor().data;
                } else {
                    observable = valueAccessor();
                }

                observable(control.getValue());
            }
        };

        if (value.options) {
            ko.utils.extend(options, value.options);
            delete value.options;
        }

        // if the textarea has no id, generate one to keep wysihtml5 happy
        if ($(element).attr('id') == undefined || $(element).attr('id') == '')
            $(element).attr('id', 'id_' + Math.floor(new Date().valueOf()));

        var control = $(element).wysihtml5(options).data("wysihtml5").editor;
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        //
        var control = $(element).data("wysihtml5").editor;
        var content = ko.utils.unwrapObservable(valueAccessor()) || {};

        if (content.data != undefined) {
            control.setValue(valueAccessor().data());
        } else {
            control.setValue(valueAccessor()());
        }
    }
};
ko.validation.makeBindingHandlerValidatable('wysihtml5');

score 0 · Answer 1 · answered Oct 09 '13 at 18:03

0

Use ko.validation.makeBindingHandlerValidatable("wysihtml5")

answered Oct 09 '13 at 18:03

Anders

17,306
10
76
144

1

Please explain why this will fix the OP's issue. – Bucket Oct 09 '13 at 18:24
The validation library only works on value binding out of the box – Anders Oct 09 '13 at 18:37
Added this code but its still doesn't work. Is there a working example out there somewhere? – jmogera Oct 11 '13 at 17:17
We need to see your custom binding – Anders Oct 12 '13 at 15:51
Added Custom Binding to question. – jmogera Oct 14 '13 at 13:24
Cant really see whats wrong there, need a fiddle with all the libs loaded. But the makeBindingHandlerValidatable is doign its job see, http://jsfiddle.net/w7TSY/2 – Anders Oct 14 '13 at 13:59
here is the updated example with the libs loaded and updated bindings: http://jsfiddle.net/jmogera/C9afu/3/ – jmogera Oct 14 '13 at 14:37
I think makeBindingHandlerValidatable is doing its job, but the wsyihtml5 control is adding the default text which i posted in the question above. That is getting stored into the property, and validation is not able to pick it up, because technically its not an empty string! – jmogera Oct 14 '13 at 14:41
Aha, you can solve that in two ways, either fix your custom binding so it only holds the actual data (meaning it will be empty when its empty). Or create a custom validation rule that takes into accoutn the format of the custom binding – Anders Oct 14 '13 at 14:51

bootstrap-wysihtml5 knockout.validation

Edit: Custom Binding

1 Answers1