A Conventional Blog for Convention Based Coders

Aurelia-Validation – Part 2 – Displaying our errors

Well the obvious thing is simply style them, but we have some useful additional data available via the controller, such as the control that is linked to the property that was bound to the rule that failed validation…

So we can see from this that the validation controller exposes a Map linking visual elements to validation failures, so we can simply find the first associated element and set focus to that DOM element.
It’s not perfect, as there can be cases where a rule has no visual element, but it will suffice for this demonstration.

So we make sure the template is globally registered:

JavaScript

1

config.globalResources(['./elements/validation-summary.html'])

and we include it at the bottom of our form:

XHTML

1

2

3

4

5

<validation-summary

errors.bind="controller.errors"

controller.bind="controller"

autofocus.bind="true">

</validation-summary>

What do we get? This piece of awesomeness:

You may have noticed this in the middle of the template:<template replaceable part="error">${error.message}</template>

This lets us replace the string with an alternative format in the host view: