JSFiddle - React, Tailwind, and code Playground

by delixfe

HTML

<script src="https://raw.github.com/ericmbarnard/Knockout-Validation/master/Src/knockout.validation.js"></script>
<label>IsCredentialsRequired
    <input type="checkbox" data-bind="checked: IsCredentialsRequired"
    />
</label>
<br />
<label>Password</label>
<input type="text" data-bind="value: Password" />
<br />
<label>ConfirmPassword</label>
<input type="text" data-bind="value: ConfirmPassword"
/>
<br />
<button data-bind="click: debug">Debug</button>

JavaScript

function ViewModel() {
    var self = this;

    self.IsCredentialsRequired = ko.observable(true);

    self.Password = ko.observable()
        .extend({
            required: {
                message: "Password is required.",
                params: true,
                onlyIf: self.IsCredentialsRequired
            }
    });

    self.ConfirmPassword = ko.observable().
    extend({
        validation: {
            validator: function (val, params) {
                var otherValue = params;
                return val === ko.validation.utils.getValue(otherValue);
            },
            message: 'Passwords do not match.',
            params: self.Password,
            onlyIf: self.IsCredentialsRequired
        }
    });

    self.debug = function () {
        debugger;
    };
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);