https://github.com/Knockout-Contrib/Knockout-Validation
A validation library for Knockout JS
https://github.com/Knockout-Contrib/Knockout-Validation
javascript knockout-validation knockoutjs knockoutjs-plugin validation-library
Last synced: 5 months ago
JSON representation
A validation library for Knockout JS
- Host: GitHub
- URL: https://github.com/Knockout-Contrib/Knockout-Validation
- Owner: Knockout-Contrib
- Created: 2011-10-24T21:03:14.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2022-07-27T14:27:26.000Z (over 2 years ago)
- Last Synced: 2024-11-01T16:08:07.745Z (6 months ago)
- Topics: javascript, knockout-validation, knockoutjs, knockoutjs-plugin, validation-library
- Language: JavaScript
- Homepage:
- Size: 1.56 MB
- Stars: 1,020
- Watchers: 72
- Forks: 379
- Open Issues: 137
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
- awesome-knockout - Validation - A validation library for Knockout JS (Plugins and libraries)
README
# Knockout Validation
A KnockoutJS Plugin for model and property validation
[](https://travis-ci.org/Knockout-Contrib/Knockout-Validation)
[](https://ci.appveyor.com/project/crissdev/knockout-validation/branch/master)
[](http://badge.fury.io/bo/knockout-validation)
[](http://badge.fury.io/js/knockout.validation)
[](http://badge.fury.io/nu/Knockout.Validation)
Contributors:
* [Eric Barnard](https://github.com/ericmbarnard)
* [Steve Greatrex](https://github.com/stevegreatrex)
* [Cristian Trifan](https://github.com/crissdev)
* [Andy Booth](https://github.com/andybooth)
* [Michal Poreba](https://github.com/michalporeba)
* and many others!
License: [MIT](http://www.opensource.org/licenses/mit-license.php)
## Install
#### Bower
```sh
bower install knockout-validation --save
```
#### NuGet
```ps1
PM> Install-Package Knockout.Validation
```
#### NPM
```sh
npm install knockout.validation --save
```
#### CDN
##### [cdnjs](https://cdnjs.com/libraries/knockout-validation)
* 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](http://www.jsdelivr.com/#!knockout.validation)
- https://cdn.jsdelivr.net/npm/[email protected]/dist/knockout.validation.js
- https://cdn.jsdelivr.net/npm/[email protected]/dist/knockout.validation.min.js
## Getting Started
```javascript
//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**:
```javascript
var myObj = ko.observable('').extend({ required: true });
```
**Min**:
```javascript
var myObj = ko.observable('').extend({ min: 2 });
```
**Max**:
```javascript
var myObj = ko.observable('').extend({ max: 99 });
```
**MinLength**:
```javascript
var myObj = ko.observable('').extend({ minLength: 3 });
```
**MaxLength**:
```javascript
var myObj = ko.observable('').extend({ maxLength: 12 });
```
**Email**:
```javascript
var myObj = ko.observable('').extend({ email: true });
```
... and [MANY MORE](https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Native-Rules)
_Much thanks to the [jQuery Validation Plug-In](https://github.com/jzaefferer/jquery-validation) 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.
```javascript
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](https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Custom-Validation-Rules)
**Or Check out our [User-Contributed Custom Rules](https://github.com/Knockout-Contrib/Knockout-Validation/wiki/User-Contributed-Rules)!**
## HTML5 Validation Attributes
**Required**:
```html
```
**Min**:
```html
```
**Max**:
```html
```
**Pattern**:
```html
```
**Step**:
```html
```
**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:
```html
```
Check out more on [Validation Bindings](https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Validation-Bindings)
## Remote Validation Rules
Check out our [Async Validation](https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Async-Rules) and [jQuery AJAX Validation](https://github.com/ericmbarnard/Knockout-Validation/wiki/Async-Rules)
## Localization
Add a reference to the localization js files after the Knockout Validation plugin
```html
```
Apply localized messages
```js
ko.validation.locale('el-GR');
```