https://github.com/matthewnitschke/kavie
Insanely Basic Knockout validation
https://github.com/matthewnitschke/kavie
javascript knockoutjs plugin validation
Last synced: 8 months ago
JSON representation
Insanely Basic Knockout validation
- Host: GitHub
- URL: https://github.com/matthewnitschke/kavie
- Owner: matthewnitschke
- Created: 2016-01-04T18:37:46.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-09-27T20:42:18.000Z (over 2 years ago)
- Last Synced: 2025-07-08T15:04:35.927Z (12 months ago)
- Topics: javascript, knockoutjs, plugin, validation
- Language: JavaScript
- Homepage:
- Size: 6.26 MB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/matthewnitschke/Kavie)
[](https://badge.fury.io/js/kavie)
# Kavie
Kavie is a small and easy to use knockout js validation library.
## Installation
You can download kavie from npm
```
npm install kavie
```
Then include it in your project after knockout js
```html
```
it can also be included via node modules
```js
var ko = require('ko');
var Kavie = require('kavie');
```
# Usage
```javascript
function ViewModel(){
var self = this;
self.value = ko.observable().extend({
kavie: {
required: true
}
});
self.submit = function(){
if (Kavie.isValid(self)){
console.log("All Good!");
}
}
}
```
## Html Side
Kavie works by adding a hasError variable to the observable. This gives the flexibility to add color changing to any element you want
```html
Uh Oh! There was an error!
```
# Validation Messages
You can use a validation message to display to the user if the validation failed
```html
```
These validation messages are stored on the validators see [custom rules](https://github.com/matthewnitschke/Kavie/wiki/Custom-Rules) for more information
# Validation rules
There are a few validation rules build in
```javascript
self.value = ko.observable().extend({
kavie: {
required: true, // [boolean] this one is obvious
maxLength: 3, // [int] max amount of characters: 3
minLength: 2, // [int] min amount of characters: 2
date: true, // [boolean] validates dates based on js dates
birthdate: true, // [boolean] uses date, and must be in past with persons age less than 120
phone: true, // [boolean] uses regex to validate a valid 10 digit phone number
email: true, // [boolean] uses regex to validate a valid email
numeric: true, // [boolean] must be an integer
regexPattern: /([A-Z])\w+/ // [regex] matches a pattern
}
});
```
It is important to note that on the date, birthdate, phone, email, and numeric validators, if the users input is null, undefined, or empty they will return true. This is so you can still have optional values and use these validators. If you want them required, add the required validator.
# More Features
There is much more to kavie, but in order to keep the readme simple the advanced features have been moved to the [wiki](https://github.com/matthewnitschke/Kavie/wiki)
## Problems?
Thanks of taking a look at kavie. If you have any problems let me know and I would love to help you out