Knockout Validation

A KnockoutJS Plugin for model and property validation


Contributors:

* Eric Barnard
* Steve Greatrex
* Cristian Trifan
* Andy Booth
* Michal Poreba
* and many others!

License: MIT

Install

#### Bower

``sh
bower install knockout-validation --save
`

#### NuGet

`ps1
PM> Install-Package Knockout.Validation
`

#### NPM

`sh
npm install knockout.validation --save
`

#### CDN

##### cdnjs
* https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.js
* https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.4/knockout.validation.min.js

##### jsdelivr
- https://cdn.jsdelivr.net/npm/knockout.validation@2.0.4/dist/knockout.validation.js
- https://cdn.jsdelivr.net/npm/knockout.validation@2.0.4/dist/knockout.validation.min.js

Getting Started

`javascript
//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/KHFn8/5424/

Native Validation Rules

Required:

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

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

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

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

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

`javascript
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.

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

//the value '5' is the second arg ('params') 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:

`html

`

Min:

`html



`

Max:

`html



`

Pattern:

`html

`

Step:

`html

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

Knockout Bindings

$3

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

`html