Skip to content

Validation Bindings

istib edited this page · 5 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 toggles CSS classes on html tags bound to invalid ViewModel properties

<div>
   <input type="text" data-bind="value: someValue, validationElement: someValue"/>
   <p data-bind="validationMessage: someValue"></p>
</div>
Something went wrong with that request. Please try again.