1. JASON

2. Knockout Validation
 A KnockoutJS Plugin for model and
property validation

3. Native Rules
 Required
 ko.observable().extend({ required: true });
 Min
 ko.observable().extend({ min: 2 });
 Max:
 ko.observable().extend({ max: 99 });
 MinLength
 ko.observable().extend({ minLength: 3 });
 MaxLength:
 ko.observable().extend({ maxLength: 12 });
 Pattern:
 ko.observable().extend({ pattern: '^[a-z0-9].$' });

4. Native Rules
 Date
 ko.observable().extend({ date: true });
 Email:
 ko.observable().extend({ email: true });
 Equal:
 ko.observable().extend({ equal: 2 });
 Not Equal:
 ko.observable().extend({ notEqual: 2 });
 Number:
 ko.observable().extend({ number: true });

5. Use
var viewModel = {
phone: ko.observable().extend({ required: true });
submit: function () {
if (viewModel.errors().length == 0) {
alert('Thank you.');
} else {
viewModel.errors.showAllMessages();
}
}
};
viewModel.errors = ko.validation.group(viewModel);
ko.validation.configure();
ko.applyBindingsWithValidation(viewModel);

6. Custom Validation Rules
ko.validation.rules['mustEqual'] = {
validator: function (val, otherVal) {
return val === otherVal;
},
message: 'The field must equal {0}'
};
ko.validation.registerExtenders();
var myCustomObj = ko.observable().extend({ mustEqual: 5 });

7. Custom Message Template
<script id="customMessageTemplate" type="text/html">
<em class="customMessage" data-bind='validationMessage: field'></em>
</script>
<div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
……
</div>

8. Configuration
Option Default
insertMessages true
decorateElement false
errorMessageClass ‘validationMessage’
errorElementClass ‘validationElement’
errorsAsTitle true
parseInputAttributes false
errorClass null
ko.validation.configure({
insertMessages: true,
errorsAsTitle:true,
errorElementClass: “errorClass",
errorMessageClass: “errorMessageClass",
decorateElement:true
});