Knockout validation - Groups test

by overflew

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="https://rawgithub.com/Knockout-Contrib/Knockout-Validation/master/Dist/knockout.validation.js"></script>
<label>Test number</label>
    <input type="text" data-bind="value: myNumber"/>
    <div>myNumber error: <span data-bind="text: myNumber.errors"/></div>

<div>Validation group: 
    <ul data-bind="foreach: validationGroup"><li data-bind="text: $data"></li></ul>
</div>

<button type="submit" class="btn" data-bind="click: testValidate">Update validation group</button>

CSS

label { display: block;  }
legend { padding-top:10px; }
ul li { padding-left: 10px; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }

JavaScript

var viewModel = {
        myNumber: ko.observable().extend({
                    maxLength: 10,
                    number: {
                        message: "Please ensure that myNumber contains only numeric characters"
                    },
                    required: {
                        message: "myNumber is required"
                    },
                    minLength: 3
                })
            };

viewModel.validationGroup = ko.validation.group([viewModel.myNumber]);

viewModel.testValidate = function () {
    viewModel.validationGroup.showAllMessages();

    //viewModel.validationGroup();
};

ko.applyBindings(viewModel);