knockout trim in mvvm validations

Question

I am using knockout as mvvm it works fine but i don't want to send data containing white spaces to server side code. Here is my sample code

   //Regular Customer
    self.nameForRegularCustomer = ko.observable("").extend({
        required: { message: 'Promotion Name is required' },
        maxlength: {
            message: 'Promotion Name can not exceed 100 character',
            params: '100'
        }
    });
    self.statusForRegularCustomer = 1; //For create Mode always  1 as new
    self.keywordForRegularCustomer = ko.observable("").extend({
        required: { message: 'Keyword is required' },
        maxlength: {
            message: 'Keyword can not exceed 100 character',
            params: '100'
        }
    });
    self.promotionMsgForRegularCustomer = ko.observable("").extend({
        required: { message: 'Promotion Message is required' }
    });
    self.promotionDescForRegularCustomer = ko.observable("").extend({
        required: { message: 'Promotion Description is required' }
        , maxlength: {
            message: 'Description can not exceed 100 character',
            params: '2000'
        }
    });
    //The Object which stored data entered in the observables
    self.RegularCustomerPromotion = {
        name: self.nameForRegularCustomer,
        description: self.promotionDescForRegularCustomer,
        keywords: self.keywordForRegularCustomer,
        happyMessage: self.promotionMsgForRegularCustomer,
        status: self.statusForRegularCustomer,
        promotionCustomerType: self.promotionCustomerType
    };

I am making ajax call with folllowing data format

  requestPromo = ko.toJSON(self.NewCustomerPromotion);

but this contains data with white space also i want to trim it before making API call
I tried to use for field level

 ko.subscribable.fn.trimmed = function () {
   return ko.computed({
    read: function () {
        return this().trim();
    },
    write: function (value) {
        this(value.trim());
       // this.valueHasMutated();
    },
    owner: this
});

but this discards validations

Nathan Fisher Nathan Fisher · Accepted Answer · 2014-03-24T22:30:51

Try creating your own toJSON method on your view-model and strip out the unnecessary white-space yourself. knockout has two functions toJS and toJSON. you can use toJS to get the current values as a javascript Object or use toJSON to get the string representation.

This is just off the top of my head and i'm not sure if it works but something like this.

self.prototype.toJSON = function(){
  var data = ko.toJS(self.NewCustomerPromotion);

  return {
        name: data.nameForRegularCustomer.trim(),
        description: data.promotionDescForRegularCustomer.trim(),
        keywords: data.keywordForRegularCustomer.trim(),
        happyMessage: data.promotionMsgForRegularCustomer.trim(),
        status: data.statusForRegularCustomer.trim(),
        promotionCustomerType: data.promotionCustomerType.trim()
    };
};

This will return an object that is ready to be serialized with the ko.toJSON to be sent over the wire.

Here is a blog post explaining in greater detail http://www.knockmeout.net/2011/04/controlling-how-object-is-converted-to.html

knockout trim in mvvm validations

2 Answers