knockout.validation

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

bower install knockout-validation --save

NuGet

PM> Install-Package Knockout.Validation

NPM

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

//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].
see more examples on the Fiddle: http://jsfiddle.net/KHFn8/5424/
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, 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:
<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
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 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');

                     }
                 });

//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].
see more examples on the Fiddle: http://jsfiddle.net/KHFn8/5424/
Native Validation Rules
Required:
__CODE_BLOCK_4__
Min:
__CODE_BLOCK_5__
Max:
__CODE_BLOCK_6__
MinLength:
__CODE_BLOCK_7__
MaxLength:
__CODE_BLOCK_8__
Email:
__CODE_BLOCK_9__
... 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 __INLINE_CODE_0__ that you pass in with the __INLINE_CODE_1__ method.
__CODE_BLOCK_10__
Learn more about Custom Rules on the WIKI
Or Check out our User-Contributed Custom Rules!
HTML5 Validation Attributes
Required:
__CODE_BLOCK_11__
Min:
__CODE_BLOCK_12__
Max:
__CODE_BLOCK_13__
Pattern:
__CODE_BLOCK_14__
Step:
__CODE_BLOCK_15__
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 __INLINE_CODE_2__ binding:
__CODE_BLOCK_16__
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
__CODE_BLOCK_17__
Apply localized messages
__CODE_BLOCK_18__

            }});

//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:

__CODE_BLOCK_4__

Min:

__CODE_BLOCK_5__

Max:

__CODE_BLOCK_6__

MinLength:

__CODE_BLOCK_7__

MaxLength:

__CODE_BLOCK_8__

Email:

__CODE_BLOCK_9__

... 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 __INLINE_CODE_0__ that you pass in with the __INLINE_CODE_1__ method.

__CODE_BLOCK_10__

Learn more about Custom Rules on the WIKI

Or Check out our User-Contributed Custom Rules!

HTML5 Validation Attributes

Required:

__CODE_BLOCK_11__

Min:

__CODE_BLOCK_12__

Max:

__CODE_BLOCK_13__

Pattern:

__CODE_BLOCK_14__

Step:

__CODE_BLOCK_15__

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 __INLINE_CODE_2__ binding:

__CODE_BLOCK_16__

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

__CODE_BLOCK_17__

Apply localized messages

__CODE_BLOCK_18__