A KnockoutJS Plugin for model and property validation
npm install knockout.validationsh
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
`
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 files after the Knockout Validation plugin
`html
`
Apply localized messages
`js
ko.validation.locale('el-GR');
``