A validation library for Knock

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].$' } }); //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:

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');