#Knockout Validation Modified
- Rewrote
ko.validation.utils.getConfigOptions
method on non-recursive manner. - Added method
utils.observablesOf
which returns list of observables in object. - Renamed
validationElement
binding intovalidationStyle
. - Renamed
validationCore
binding intoexposeValidationResult
. - Decreased binding's dependencies.
- Renamed
showAllMessages
intomarkAsModified
. - Renamed
isAnyMessageShown
intoisAnyInvalidModified
- Renamed
ko.validation.group
intoko.validation.model
and optimized its creation. - Removed wrapping for
ko.applyBindings
: if someone wants to do so it can. ko.validatableObservable
now doesn't accept view models.- Fixed password confirmation issue in test-runner.
- Fixed all tests. Removed unnecessary ones.
- Optimized
validatable
extender: removed unnecessary methods and observables. - Removed
clearError/setError
. Added insteadobservable.error.clear
anderror
methods. - Renamed
ko.validation.validateObservable
intoko.validation.process
. - Renamed
configuration.decorateElement
intoconfiguration.decorateInputElement
. Removed dependency on this option invalidationElement
binding. - Fixed memory leaks with annonymous rules.
- Now errors list for validation model is throttled, so now it's changed only once even if few observables in model became invalid.
- Now observables which are not validatable can't be processed by validation bindings, error is thrown instead.
- Removed
setAttribute/hasAttribute/getAttribute
from utils. - Rewrote
setDomData/getDomData
to use knockout domData object, so in this case data will be cleared when domNode is removed. - Removed localizations if someone wants to localize translations he has to rewrite
ko.validation.formatMessage
function - Implemented ability storing last failed rule
- Decreased amount of notifications
- Refactored code.
- Added
validationState
computed which ensures that UI is updated only once whenisModified
and/orerror
are changed
A KnockoutJS Plugin for model and property validation
Contributors:
- Eric Barnard
- Steve Greatrex
- Andy Booth
- Michal Poreba
- and many others!
License: MIT
###NuGet: Knockout.Validation
Tested in IE 6+, FF7, Chrome 15 ##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/ericbarnard/KHFn8/
##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="text" data-bind="value: myProp" min="2" />
Max: <input type="text" data-bind="value: myProp" max="99" />
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 file after the Knockout Validation plugin
<script type="text/javascript" src ="knockout.validation.js"></script>
<script type="text/javascript" src ="el-GR.js"> </script>