Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

The core has moved! Please visit the Knockout-Contrib Organization

branch: master

This branch is 0 commits ahead and 0 commits behind master

Merge pull request #261 from mechuwind/master

Added Norwegian localization
latest commit 070e0c805a
Steve Greatrex stevegreatrex authored
Octocat-spinner-32 Dist Fixed #170
Octocat-spinner-32 Lib Updated to Knockout 2.2
Octocat-spinner-32 Localization Create no-NB.js
Octocat-spinner-32 Src Merged #170
Octocat-spinner-32 Tests Merged #170
Octocat-spinner-32 .gitattributes add .gitattributes file
Octocat-spinner-32 .gitignore Setting up project
Octocat-spinner-32 CONTRIBUTING.md Update CONTRIBUTING.md
Octocat-spinner-32 ReadMe.md Remove empty line on readme
Octocat-spinner-32 grunt.js jsHint coverage
ReadMe.md

Knockout Validation

A KnockoutJS Plugin for model and property validation

Contributors:

License: MIT

NuGet: Knockout.Validation

Tested in IE 6+, FF7, Chrome 15

Getting Started

//start using it!
var myValue = ko.observable().extend({ required: true });

//oooh complexity
var myComplexValue = ko.observable().extend({ 
                     required: true,
                     minLength: 3,
                     pattern: {
                          message: 'Hey this doesnt match my pattern',
                          params: '^[A-Z0-9].$'
                     }
                 });

//or chaining if you like that
var myComplexValue = ko.observable()

myComplexValue.extend({ required: true })
            .extend({ minLength: 3 })
            .extend({ pattern: {
                 message: 'Hey this doesnt match my pattern',
                 params: '^[A-Z0-9].$'
            }});

//want to know if all of your ViewModel's properties are valid?
var myViewModel = ko.validatedObservable({
   property1: ko.observable().extend({ required: true }),
   property2: ko.observable().extend({ max: 10 })
});

console.log(myViewModel.isValid()); //false

myViewModel().property1('something');
myViewModel().property2(9);

console.log(myViewModel.isValid()); //true

see more examples on the Fiddle: http://jsfiddle.net/ericbarnard/KHFn8/

Native Validation Rules

Required:

var myObj = ko.observable('').extend({ required: true });

Min:

var myObj = ko.observable('').extend({ min: 2 });

Max:

var myObj = ko.observable('').extend({ max: 99 });

MinLength:

var myObj = ko.observable('').extend({ minLength: 3 });

MaxLength:

var myObj = ko.observable('').extend({ maxLength: 12 });

Email:

var myObj = ko.observable('').extend({ email: true });

... and MANY MORE

Much thanks to the jQuery Validation Plug-In team for their work on many of the rules

Custom Validation Rules

Custom Rules

Custom Rules can be created using the simple example below. All you need is to define a validator function and a default message. The validator function takes in the observable's value, and the params that you pass in with the extend method.

ko.validation.rules['mustEqual'] = {
    validator: function (val, otherVal) {
        return val === otherVal;
    },
    message: 'The field must equal {0}'
};
ko.validation.registerExtenders();

//the value '5' is the second arg ('otherVal') that is passed to the validator
var myCustomObj = ko.observable().extend({ mustEqual: 5 });

Learn more about Custom Rules on the WIKI

Or Check out our User-Contributed Custom Rules!

HTML5 Validation Attributes

Required: <input type="text" data-bind="value: myProp" required />

Min: <input type="text" data-bind="value: myProp" min="2" />

Max: <input type="text" data-bind="value: myProp" max="99" />

Pattern: <input type="text" data-bind="value: myProp" pattern="^[a-z0-9].*" />

Step: <input type="text" data-bind="value: myProp" step="3" />

Special Note, the 'MinLength' attribute was removed until the HTML5 spec fully supports it

Knockout Bindings

ValidationMessage

If you want to customize the display of your objects validation message, use the validationMessage binding:

<div>
   <input type="text" data-bind="value: someValue"/>
   <p data-bind="validationMessage: someValue"></p>
<div>

Check out more on Validation Bindings

Remote Validation Rules

Check out our Async Validation and jQuery AJAX Validation

Localization

Add a reference to the localization js file after the Knockout Validation plugin

<script type="text/javascript" src ="knockout.validation.js"></script>
<script type="text/javascript" src ="el-GR.js"> </script>
Something went wrong with that request. Please try again.