Nutritious Pumpkin Masses

    knockout.validation
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/knockout.validation package

    2.0.4 • Public • Published

    Knockout Validation

    A KnockoutJS Plugin for model and property validation

    Build Status Build status Bower version npm version NuGet version

    Contributors:

    License: MIT

    Install

    Bower

    bower install knockout-validation --save

    NuGet

    PM> Install-Package Knockout.Validation

    NPM

    npm install knockout.validation --save

    CDN

    cdnjs
    jsdelivr

    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, 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

    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');

    Keywords

    none

    Install

    npm i knockout.validation

    DownloadsWeekly Downloads

    9,659

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    161 kB

    Total Files

    40

    Last publish

    Collaborators

    • crissdev
    • stevegreatrex