Skip to content
Volodymyr Kotylo edited this page May 9, 2013 · 15 revisions

Knockout Validation has several configuration options to help tailor it to your needs.

Option Default Description
insertMessages true Indicates whether <span> tags with the validation message will be inserted to the right of your <input> element
decorateElement false Indicates whether to assign an error class to the <input> tag when your property is invalid
errorMessageClass ‘validationMessage’ The CSS class assigned to validation error messages
errorElementClass ‘validationElement’ The CSS class assigned to validation error <input> elements, must have decorateElement set to true
errorsAsTitle true Shows tooltips using input ‘title’ attribute. False hides them
errorClass null If defined, the CSS class assigned to both <input> and validation message elements
parseInputAttributes false Indicates whether to assign validation rules to your ViewModel using HTML5 validation attributes
messagesOnModified true Indicates whether validation messages are triggered only when properties are modified or at all times
messageTemplate null The id of the <script type="text/html"></script> that you want to use for all your validation messages
grouping { deep: false, observable: true } when using the group or validatedObservable functions, deep indicates whether to walk the ViewModel (or object) recursively, or only walk first-level properties. observable indicates whether the returned errors object is a ko.computed or a simple function

If you would like to change the default configurations, you have a couple options for how to do that:

  • Use the ko.validation.init( /* options object */ ); function
  • Use the ko.applyBindingsWithValidation(viewModel, rootNode, /*options object */ ); function **contextual
  • Use the data-bind="validationOptions: /*options object */" binding **contextual

**contextual – this means the validation options that you use only apply to the current node and children. You can define different validation options for different html node contexts on your page!!