Comparing two fields with knockout-validation

Question

I have a viewmodel for a form that I'm trying to add validation to using knockout-validation.

fromDate: ko.observable(
            moment().subtract('days', 1).startOf('day').format(dateFormat)
          ),
toDate: ko.observable(
            moment().startOf('day').format(dateFormat)
        ),

I need to make sure that the from date is less than the to date. I can't seem to get any form of custom validator to pick up the reference to the second observable. I need something along the lines of:

toDate: ko.observable(moment().startOf('day').format(dateFormat)).extend({
          validation: {
            validator: function (val, someOtherVal) {
                return moment(val) >= moment(someOtherVal);
            },
            message: 'Must be greater or equal to From Date',
            params: viewModel.fromDate()
          }
        }),

Any ideas?

Update

I'm sure I'd already tried this, but moving the extension method into the onload function works.

$(function () {
    ko.validation.configure({ decorateElement: true });

    viewModel.toDate.extend({
    validation: {
            validator: function (val, someOtherVal) {
                return moment(val) >= moment(viewModel.fromDate());
            },
            message: 'To date must be greater than from date',
        }
    });

    ko.applyBindings(viewModel);
});

Answer 1

knockout-validation's core rules are not able to handle observables as parameters for validations. But there is already a push request which should fix that: https://github.com/ericmbarnard/Knockout-Validation/pull/217

Therefore you have to use a custom role for that. You should insert the param as a function (by omitting the parenthesis). That will enable knockout-validation to react to changes in the param.

function ViewModel() {
    var self = this; // capture this to be able to reference properties

    self.fromDate = ko.observable(
        moment().subtract('days', 1).startOf('day').format(dateFormat)
    );
    self.toDate = ko.observable(
        moment().startOf('day').format(dateFormat)
    ).extend({
      validation: {
        validator: function (val, someOtherVal) {
            return moment(val) >= moment(someOtherVal());
        },
        message: 'Must be greater or equal to From Date',
        params: self.fromDate
      }
    }),
}

Answer 2

Looking at the documentation for it, this looks like the way that you could do it:

ko.validation.rules['greaterThan'] = {
    validator: function (val, otherVal) {
        return val > otherVal;
    },
    message: 'The field must be greater than {0}'
};

ko.validation.registerExtenders();

fromDate: ko.observable(
            moment().subtract('days', 1).startOf('day').format(dateFormat)
          ),
toDate: ko.observable(
            moment().startOf('day').format(dateFormat)
        ).extend({ greaterThan: fromDate() });

It's untested, and I don't know if you want to pass in fromDate(), or fromDate and then in the validator use otherVal().

Answer 3

This is a bit late to the party, but when I google for "knockoutjs password field match" this is the top hit.

I wanted a matcher without using the validation extension, because I did not need all the offerings of that package.

I have found a tidy knockoutjs trick for checking two or more fields against each other using an extender. That is, subscribe the original field to the second field in an extender to trigger a valueHasMutated() against the second field when the original is updated.

  ko.extenders.match = function(target, match_original) {
  target.match_ok = ko.observable();
  function copy(value) {
    target.match_ok(value == match_original());
  }
  function original(value) {
    target.valueHasMutated();
  }
  copy(target());
  target.subscribe(copy);
  match_original.subscribe(original);
  return target;
};

Here is a jsfiddle to better illustrate the functionality https://jsfiddle.net/8nugva9f/13/

HTH

Answer 4

this.fromDate= ko.observable(null).extend({
        date: true,

    });

this.toDate = ko.observable(null).extend({
        date: true,
        min: this.fromDate,

    });

Try this.