A KnockoutJS Plugin for model and property validation
Contributors:
- Eric Barnard
- Steve Greatrex
- Cristian Trifan
- Andy Booth
- Michal Poreba
- and many others!
License: MIT
bower install knockout-validation --savePM> Install-Package Knockout.Validationnpm install knockout.validation --save- 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
- https://cdn.jsdelivr.net/npm/[email protected]/dist/knockout.validation.js
- https://cdn.jsdelivr.net/npm/[email protected]/dist/knockout.validation.min.js
//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()); //truesee more examples on the Fiddle: http://jsfiddle.net/KHFn8/5424/
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 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, 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!
Required:
<input type="text" data-bind="value: myProp" required />Min:
<input type="number" data-bind="value: myProp" min="2" />
<input type="week" data-bind="value:myWeek" min="2012-W03" />
<input type="month" data-bind="value:myMonth" min="2012-08" />Max:
<input type="number" data-bind="value: myProp" max="99" />
<input type="week" data-bind="value:myWeek" max="2010-W15" />
<input type="month" data-bind="value:myMonth" min="2012-08" />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
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
Check out our Async Validation and jQuery AJAX Validation
Add a reference to the localization js files after the Knockout Validation plugin
<script type="text/javascript" src="knockout.validation.js"></script>
<script type="text/javascript" src="el-GR.js"></script>
<script type="text/javascript" src="fr-FR.js"></script>
<script type="text/javascript" src="de-DE.js"></script>Apply localized messages
ko.validation.locale('el-GR');