#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
var myValue = ko.observable().extend({ required: true });
var myComplexValue = ko.observable().extend({
required: true,
minLength: 3,
pattern: {
message: 'Hey this doesnt match my pattern',
params: '^[A-Z0-9].$'
}
});
var myComplexValue = ko.observable()
myComplexValue.extend({ required: true })
.extend({ minLength: 3 })
.extend({ pattern: {
message: 'Hey this doesnt match my pattern',
params: '^[A-Z0-9].$'
}});
var myViewModel = ko.validatedObservable({
property1: ko.observable().extend({ required: true }),
property2: ko.observable().extend({ max: 10 })
});
console.log(myViewModel.isValid());
myViewModel().property1('something');
myViewModel().property2(9);
console.log(myViewModel.isValid());
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();
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>