Skip to content

Validation Bindings

Edward Brey edited this page Jan 22, 2014 · 13 revisions

Knockout Validation comes with several built-in 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>

###ValidationOptions### For large form areas, use the validationOptions binding to specify validation options. This will cascade your options through the children of the container to which you apply to binding.

Use this for:

  • Custom Message Templates
  • Disabling auto-inserting of messages
  • Changing the Validation Message CSS Class
<div data-bind='validationOptions: { messageTemplate: "customMessageTemplate" }'>
    <label>Email: <input data-bind='value: emailAddress' required pattern="@"/></label>
    <label>Location: <input data-bind='value: location'/></label>
    <label>Age: <input data-bind='value: age' required/></label>
</div>

###ValidationElement### This sets the message as title attribute (tooltip) of the bound element. If the decorateElement option is true, it also toggles the CSS class 'validationElement' on the bound element. A different class can be configured using the errorElementClass option. The binding below applies the message as title to an input element.

<div>
   <input type="text" data-bind="value: someValue, validationElement: someValue"/>
</div>