Skip to content

zemacik/Knockout-Validation

This branch is 4 commits ahead of, 18 commits behind Knockout-Contrib/Knockout-Validation:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ea2be7c · Jul 24, 2015
May 18, 2015
Jul 24, 2015
Feb 26, 2015
Jul 24, 2015
Aug 26, 2012
Nov 4, 2013
Oct 3, 2013
Oct 5, 2013
May 18, 2015
Nov 26, 2012
May 18, 2015
May 18, 2015
Jan 20, 2015
May 18, 2015

Repository files navigation

#Knockout Validation A KnockoutJS Plugin for model and property validation

Build Status Bower version npm version NuGet version

Contributors:

License: MIT

Install

Bower

bower install knockout-validation --save-dev

NuGet

PM> Install-Package Knockout.Validation

NPM

npm install knockout.validation --save

CDN

##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, otherVal) {
        return val === otherVal;
    },
    message: 'The field must equal {0}'
};
ko.validation.registerExtenders();

//the value '5' is the second arg ('otherVal') 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');

About

A validation library for Knockout JS

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 96.9%
  • HTML 1.8%
  • CSS 1.3%