Skip to content

stalniy/Knockout-Validation

 
 

Repository files navigation

#Knockout Validation Modified

Modifications

  • Rewrote ko.validation.utils.getConfigOptions method on non-recursive manner.
  • Added method utils.observablesOf which returns list of observables in object.
  • Renamed validationElement binding into validationStyle.
  • Renamed validationCore binding into exposeValidationResult.
  • Decreased binding's dependencies.
  • Renamed showAllMessages into markAsModified.
  • Renamed isAnyMessageShown into isAnyInvalidModified
  • Renamed ko.validation.group into ko.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 instead observable.error.clear and error methods.
  • Renamed ko.validation.validateObservable into ko.validation.process.
  • Renamed configuration.decorateElement into configuration.decorateInputElement. Removed dependency on this option in validationElement 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 when isModified and/or error are changed

A KnockoutJS Plugin for model and property validation

Build Status

Contributors:

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>

About

A validation library for Knockout JS

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 98.9%
  • Other 1.1%