A KnockoutJS Plugin for model and property validation
Contributors:
- Eric Barnard
- Steve Greatrex
- Andy Booth
- Michal Poreba
- and many others!
License: MIT
bower install knockout-validation --save-devPM>Install-Package Knockout.Validationnpm install knockout.validation --save- https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js
- https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js
- https://cdn.jsdelivr.net/npm/knockout.validation@2.0.3/dist/knockout.validation.js
- https://cdn.jsdelivr.net/npm/knockout.validation@2.0.3/dist/knockout.validation.min.js
//start using it!varmyValue=ko.observable().extend({required: true});//oooh complexityvarmyComplexValue=ko.observable().extend({required: true,minLength: 3,pattern: {message: 'Hey this doesnt match my pattern',params: '^[A-Z0-9].$'}});//or chaining if you like thatvarmyComplexValue=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?varmyViewModel=ko.validatedObservable({property1: ko.observable().extend({required: true}),property2: ko.observable().extend({max: 10})});console.log(myViewModel.isValid());//falsemyViewModel().property1('something');myViewModel().property2(9);console.log(myViewModel.isValid());//truesee more examples on the Fiddle: http://jsfiddle.net/KHFn8/5424/
Required:
varmyObj=ko.observable('').extend({required: true});Min:
varmyObj=ko.observable('').extend({min: 2});Max:
varmyObj=ko.observable('').extend({max: 99});MinLength:
varmyObj=ko.observable('').extend({minLength: 3});MaxLength:
varmyObj=ko.observable('').extend({maxLength: 12});Email:
varmyObj=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,otherVal){returnval===otherVal;},message: 'The field must equal {0}'};ko.validation.registerExtenders();//the value '5' is the second arg ('otherVal') that is passed to the validatorvarmyCustomObj=ko.observable().extend({mustEqual: 5});Learn more about Custom Rules on the WIKI
Or Check out our User-Contributed Custom Rules!
Required:
<inputtype="text" data-bind="value: myProp" required/>Min:
<inputtype="number" data-bind="value: myProp" min="2" /><inputtype="week" data-bind="value:myWeek" min="2012-W03" /><inputtype="month" data-bind="value:myMonth" min="2012-08" />Max:
<inputtype="number" data-bind="value: myProp" max="99" /><inputtype="week" data-bind="value:myWeek" max="2010-W15" /><inputtype="month" data-bind="value:myMonth" min="2012-08" />Pattern:
<inputtype="text" data-bind="value: myProp" pattern="^[a-z0-9].*" />Step:
<inputtype="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><inputtype="text" data-bind="value: someValue"/><pdata-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
<scripttype="text/javascript" src="knockout.validation.js"></script><scripttype="text/javascript" src="el-GR.js"></script><scripttype="text/javascript" src="fr-FR.js"></script><scripttype="text/javascript" src="de-DE.js"></script>Apply localized messages
ko.validation.locale('el-GR');