conditional-knockout-validation-example

Conditional Knockout Validation example

by mehdi_mollaverdi

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>
<div>
    <label for="country">Country</label>
	<select id="country" data-bind="options: availableCountries, value: country, optionsCaption: 'Choose...'"></select>

    <label for="state">State</label>
	<select id="state" data-bind="options: availableStates, value: state, optionsCaption: 'Choose...'"></select>
</div>

CSS

label { display: block; }
.validationMessage {color : red}

JavaScript

ko.validation.init();

function Address() {
  var self = this;
  self.availableCountries= ['AU', 'NZ', 'US'];
  self.availableStates =  ['Alabama', 'Alaska', 'Arizona', 'Arkansas'];
  self.country = ko.observable().extend({required: true});
  self.state = ko.observable().extend({required: {onlyIf:
    function() {return self.country() === 'US';}}});
};

var address = ko.validatedObservable(new Address())();
ko.applyBindings(address);