1

i'm using knockout.js and adding a BindingHandlers to format an observable to decimal. The thing is that when i applied this binding the required validationmessage is not appearing.

This is the code

function formatWithComma(x, precision, seperator) {
        var options = {
            precision: precision || 2,
            seperator: seperator || ','
        }
        var formatted = parseFloat(x, 10).toFixed(options.precision);
        var regex = new RegExp(
                '^(\\d+)[^\\d](\\d{' + options.precision + '})$');
        formatted = formatted.replace(
            regex, '$1' + options.seperator + '$2');
        return formatted;
    }

    function reverseFormat(x, precision, seperator) {
        var options = {
            precision: precision || 2,
            seperator: seperator || ','
        }
        var regex = new RegExp(
            '^(\\d+)[^\\d](\\d+)$');
        var formatted = x.replace(regex, '$1.$2');
        return parseFloat(formatted);
    }

    ko.bindingHandlers.commaDecimalFormatter = {
            init: function (element, valueAccessor) {
                var observable = valueAccessor();

                var interceptor = ko.computed({
                    read: function () {
                        if (!observable())
                            return 0;
                        else
                            return formatWithComma(observable());
                    },
                    write: function (newValue) {
                        observable(reverseFormat(newValue));
                    }
                });

                if (element.tagName == 'INPUT')
                    ko.applyBindingsToNode(element, {
                        value: interceptor
                    });
                else
                    ko.applyBindingsToNode(element, {
                        text: interceptor
                    });
            },
            update: function (element, valueAccessor) {

                var observable = valueAccessor();

                var interceptor = ko.computed({
                    read: function () {
                        if (!observable())
                            return 0;
                        else
                            return formatWithComma(observable());
                    },
                    write: function (newValue) {
                        observable(reverseFormat(newValue));
                    }
                });          
            }
        }
        ko.validation.makeBindingHandlerValidatable('commaDecimalFormatter');

--The observable

self.Number = ko.observable(0).extend({
    required: {
        params: true,
        message: "Requerido"
    }
});

--- and the input

<input id="txtGroam" data-bind="commaDecimalFormatter: Model().Number, valueUpdate: 'keyup'" />
<p class="text-danger-alt" data-bind="validationMessage: Model().Number"></p>

If I use 'value' instead of 'commaDecimalFormatter', the validation works perfectly.

Any clues?

ZeVaZ
  • 11
  • 2
  • 2
    Can you put a fiddle together? where are your functions formatWithComma and reverseFormat? – Luis May 19 '15 at 15:37
  • I've added the functions, how can i set the fiddle with the jquery validations? – ZeVaZ May 19 '15 at 15:57
  • Use external resources and link to a public available file, like a CDN or in github, – Luis May 19 '15 at 15:58
  • ok can you lets you know what is your exact requirement . are you trying to rounding of a decimal number to 2 places etc . cheers – super cool May 20 '15 at 05:07
  • yes, i need to convert, whatever the user inputs, into a decimal, replacing dots with commas, etc. The thing is that when I add this functionality, for some reason the "required" validation message won't appear, it's working for a computed i'm using tho. – ZeVaZ May 20 '15 at 14:31

0 Answers0