Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Knockout Validation Plugin for the Rackspace Control Panel.
JavaScript
branch: integration_sp…

This branch is 173 commits behind master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
lib
spec
src
.gitignore
.npmignore
.travis.yml
Gruntfile.js
README.md
karma.conf.js
package.json

README.md

ko-validation Build Status

Knockout Validation Plugin for the Rackspace Control Panel.

Getting Started

Just hook up validation to your knockout observables:

View Model:

myViewModel = function () {
  this['myField'] = ko.observable('defaultValue').extend({
    'required': ['FieldName'], // will show the message "FieldName is required."
    'length': ['FieldName', 30] // will show the message "FieldName cannot be longer than 30 characters."
  });

  this['name'] = ko.observable().extend({
    'required': ['', 'Please enter your name.'] // will show "Please enter your name."
  });
};

Template:

<div>
  <input type="text" data-bind="value: myField">
</div>

By default, the plugin will insert a span in the parent element of the input that is bound to that observable, and show the validation messages there.

Validation Rules

Currently the following rules are supported:

ko.observable().extend({ 'required': ['Field Name', 'Optional custom error message'] });
var invalidCharacters = ['%', '!', '$'];
ko.observable().extend({
  'invalidChars': ['Field Name', invalidCharacters, 'Optional custom error message']
});
var maximumLength = 128;
ko.observable().extend({ 'length': ['Field Name', maximumLength] });
var minimum = 1;
var maximum = 10;
ko.observable().extend({
  'range': ['Field Name', minimum, maximum, 'Optional custom error message']
});
// validates that the observable value is less than or equal to the value in the input field #max-count
var anotherFieldId = 'max-count';
ko.observable().extend({
  'lessThanOrEqualToFieldValue': ['Minimum Count', 'Maximum Count', anotherFieldId]
});
// validates that the observable value is greater than or equal to the value in the input field #min-count
var anotherFieldId = 'min-count';
ko.observable().extend({
  'greaterThanOrEqualToFieldValue': ['Maximum Count', 'Minimum Count', anotherFieldId]
});

Validating Computed Observables

Sometimes we want to have multiple fields behave as a single field for validation purposes.

You can add an observable for each field and a computed observable with the final value, and have the computed observable be validated.

One example is if you have a text field alongside a select drop-down to select a time range, allowing the user to enter a number in the text field, and an option out of "Minutes, Hours, Days" in the select.

That would look like:

View Model:

this['time'] = ko.observable();

this['timeUnit'] = ko.observable('minutes');

this['timeInMinutes'] = ko.computed(function () {
  return convertToMinutes(this['time'](), this['timeUnit']());
}, this).extend({
  'validatesAfter': [this['time'], this['timeUnit']],
  'required': ['Time'],
  'range': ['Time', 0, (60 * 24), gettext('Cooldown must be between 0 minutes and 1 day.')]
});

And, on the template:

<div>
  <input type="text" data-bind="value: time">
  <select data-bind="value: timeUnit">
</div>

Notice the validationAfter extension passed to timeInMinutes. That means that observable will be validated after changes on both time and timeUnit, and the error message will be shown by the input fields associated to each of them.

Validating Checkboxes

Validating that at least one checkbox is checked in a checkbox group is as easy as extending an observable array with the checkboxes values to be required. One problem that this solution could cause is that a validation message would be inserted after each checkbox. To ensure only one validation message is inserted somewhere, use the validationMessage binding:

View Model:

this['reasonsToCancelAccount'] = ko.observableArray([]).extend({
  'required': ['', 'Choose at least one please']
});

Template:

<div>
  <ul>
    <li><input type="checkbox" data-bind="checked: reasonsToCancelAccount" value="reason1"/>R1</li>
    <li><input type="checkbox" data-bind="checked: reasonsToCancelAccount" value="reason2"/>R2</li>
    <li><input type="checkbox" data-bind="checked: reasonsToCancelAccount" value="reason3"/>R3</li>
  </ul>
  <span data-bind="validationMessage: reasonsToCancelAccount"></span>
</div>

When an element with validationMessage binding exists, new elements for displaying validation messages will not be automatically inserted in the DOM.

Something went wrong with that request. Please try again.