Tag Archives: Aurelia

Aurelia – validation of dependent inputs

Form validation in Aurelia is actually pretty nice.
You can configure the validation rules in a chainable api and add multiple rules to single fields.

However there is a problem if you want to trigger the validation of an input when another input is filled. A good example are two inputs (a start value and an end value). Of course you want to validate that the start-value is less than the end-value. But if you add the rule to both fields only the edited field will show (and reset) the error message.
Ok… This explaination might be a bit confusing… Let’s consider the following example:

You have two inputs, ‘Start’ and ‘End’. End has to be greater than start. You type ’20’ as start and ’30’ as end. It gonna look something like this:

But suddenly you realize, the start should really be 50. Of course the validation will fail, and the start will be marked as invalid.
If you now change the value of end to 100, the start-input will still be marked as invalid, because only the input you are editing is validated and you haven’t told the validation that the inputs are dependent.

This is only an example of many other use cases. I’m sure you can think of other examples like two dates (I will show this in another blogpost, where I’ll tell you about some problems I had with the Aurelia materialize datepicker), or two inputs where only one should be filled and the other be empty.
Everything results in one problem: Validation of dependent inputs.

Continue reading