Custom knockout check with observable parameter

Question

I have a situation where I need to check the maximum amount of a field in my view model. However, the maximum amount must be variable and calculated depending on the user interface element selected outside this model. I tried to include the observable as a parameter in my own validator, but it does not update when the value changes.

I have the feeling that as soon as the verification code is executed for the first time, it holds onto the parameters.

HTML list that does not use Knockout

<select id="ContentsReplacementAmount"> <option value="25000">£25000</option> <option value="50000">£50000</option> <option value="75000">£75000</option> </select> 

Here is the dumb version of the code I'm using.

 var SpecifiedValuablesViewModel = function (maxSpecifiedItemAmount) { var self = this; self.maxSpecifiedItemAmount = ko.observable(maxSpecifiedItemAmount); self.amountToAdd = ko.observable().extend({ validation: { validator: function (val, max) { return val <= max; }, message: 'The amount must be a maximum of £{0}', params: self.maxSpecifiedItemAmount() } }); }; var specifiedValuablesViewModel = new SpecifiedValuablesViewModel($('#ContentsReplacementAmount').val()); ko.applyBindings(ko.validatedObservable(specifiedValuablesViewModel), document.getElementById('SpecifiedValuables')); 

Event outside maxSpecifiedAmount

 $('#ContentsReplacementAmount').on('change', function () { specifiedValuablesViewModel.maxSpecifiedItemAmount(parseInt($(this).val())); }); 

My question is: how can I achieve this?

Answer 1

Now I managed to figure it out using the following code:

Create custom validator function

 var customMax = function(val, max) { return val <= max(); }; 

Pass the check function and wrap the message in a function

 var SpecifiedValuablesViewModel = function (maxSpecifiedItemAmount) { var self = this; self.maxSpecifiedItemAmount = ko.observable(maxSpecifiedItemAmount); self.amountToAdd = ko.observable().extend({ validation: { validator: customMax, message: function () { return 'The maximum allowed is ' + self.maxSpecifiedItemAmount(); }, params: self.maxSpecifiedItemAmount } }); self.maxSpecifiedItemAmount.subscribe(function (amount) { self.amountToAdd.isModified(false); }); }; var specifiedValuablesViewModel = new SpecifiedValuablesViewModel($('#ContentsReplacementAmount').val()); ko.applyBindings(ko.validatedObservable(specifiedValuablesViewModel), document.getElementById('SpecifiedValuables')); $('#ContentsReplacementAmount').on('change', function () { specifiedValuablesViewModel.maxSpecifiedItemAmount(parseInt($(this).val())); }); 

JSFiddle example

Answer 2

This is a shot in the dark since I am not so familiar with the validation plugin, but I will try

  validation: { validator: function (val, max) { return val <= max(); }, message: 'The amount must be a maximum of £{0}', params: self.maxSpecifiedItemAmount } 

This way you pass the observed value, not its value, as your validation parameter and evaluate it when the validation function is called, and not when the rule is defined.