Knockout Custom Validation with an observable parameter

user_978264 0
Viewed 11576

I have a situation where I need to validate the max amount of a field in my view model. However the max amount has to be variable and is calculated depending on a UI item selected outside of this model. I have attempted to include the observable as a parameter in my custom validator but it appears not to update when the value is changed.

I have a feeling that once the validation code is executed first time it holds on to the parameters.

The HTML of the list that's not using Knockout

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

Here is a dummed down 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 of the maxSpecifiedAmount

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

My question is, how can I achieve this?

knockout-validation knockout.js validation javascript
2 Answers

This is a shot in the dark since I'm not all that familiar with the validation plugin, but try

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

This way you're passing the observable itself, rather than its value, as your validation parameter and evaluating it when the validator function is invoked rather than when the rule is defined.

user_11512240
Related