Form validation with Aurelia

Workaround 1

I asked on gitter for help and Doug Kent suggested various solutions the most promising being to use two controllers: one to validate the button, one to display the error. I didn't managed to get it to work but, based on this idea, I found a workaround (and I hope we will have a clean method to do this in the future):

1. I keep the controller as is for validation and error display.
2. I use a Validator to manually validate the form without impacting error reporting. The idea is to:
   1. Validate the form in attached: this form can also be used to edit an existing todo (which has a valid title), so the save button can be enabled or disabled on page load. This validation is done with the Validator which means no errors will be reported to the user.
   2. Watch on the title property of my todo and validate the form each time it changes.

Here is the relevant part of the code:

import { inject, ObserverLocator } from 'aurelia-framework';
import { ValidationControllerFactory, ValidationRules, Validator, validateTrigger } from 'aurelia-validation';


@inject(ValidationControllerFactory, Validator, ObserverLocator)
export class TodoPage {
    constructor(controllerFactory, validator, ol) {
        // We rely on the controller to display the errors.
        this.controller = controllerFactory.createForCurrentScope();
        // We rely on the validator to know if the canSave the todo or not
        // (update the canSave property in the validation method)
        this.validator = validator;
        this.canSave = false;

        this.todo = {};
        ValidationRules
            .ensure('title').required().minLength(3).withMessage('Title must at least be 3 chars long.')
            .on(this.todo);
        this.controller.validateTrigger = validateTrigger.changeOrBlur;

        ol.getObserver(this.todo, 'title').subscribe(() => {
            this.validate();
        });
    }

    attached() {
        this.validate();
    }

    validate() {
        this.validator.validateObject(this.todo).then(results => {
            let valid = true;

            // results is an array of validation results. Each result has a
            // valid property set to true if the rule is valid.
            for (let result of results) {
                valid = valid && result.valid;
            }

            this.canSave = valid;
        });
    }
}

I then use canSave in my template:

<a href="#"
   class="button button-big button-fill color-green ${canSave ? '' : 'disabled'}"
   click.delegate="saveTodo()">Save</a>

You can view the full code here and here. It feels a bit hackish and I don't think this will scale to big forms.

Workaround 2 (looks more solid)

After new exchanges on gitter, Doug Kent made another suggestion: use a custom validator instead of StandardValidator. This way I should be able to hook on the validation phase and call a callback. Guess what: it worked. Let's see how.

We start by creating an new class respecting the Validator interface and taking as argument an instance of the StandardValidator which will do the actual validation work and a callback:

constructor(validator, cb) {
    this.validator = validator;
    this.cb = cb;
}

The idea is then to use the promise returned by this.validator.validateObject to call our callback each time the promise is resolved:

validateObject(object, rules) {
    return this.validator.validateObject(object, rules).then(results => {
        this.cb(results);
        return results;
    });
}

We are almost done. We also need to trigger the validation when a property of the form is validated. For instance, here, when the user modifies the title of the todo, validateObject won't be called. The controller will only call validateProperty. That's not a big problem: once the property is validated, we can validate the whole form to update TodoPage.canSave:

validateObject(object, rules) {
    return this.validator.validateObject(object, rules).then(results => {
        this.cb(results);
        return results;
    });
}

Now let's see how we can use this. We initialize the validator and the controller in the constructor:

// validator is an instance of StandardValidator that was injected by DI.
this.validator = new TodoValidator(validator, results => this.updateCanSave(results));
this.controller = controllerFactory.createForCurrentScope(this.validator);
this.controller.validateTrigger = validateTrigger.changeOrBlur;

Since this page can be used in two cases (creating a new todo and editing an existing one), we differ the creation of the validation rules a little bit: if we set them up in the constructor, they wouldn't apply on the proper object when editing a TODO. We wait for the activation and the page to distinguish between these to cases:

1. Creating a new TODO

   this.todo = {};
   this.setupValidation();
   

2. Editing a TODO

   this.storage.getTodo(params.id)  // Fetch the TODO.
       .then(todo => this.todo = todo)  // Save the TODO in the current object.
       .then(() => {
           // Setup the validation rules.
           this.setupValidation();
           // Launch validation to enable the save button if the edited TODO is valid.
           this.validate();
       });
   

The setupValidation method is just here to create our validation rules:

ValidationRules
        .ensure('title').required().minLength(3).withMessage('Title must at least be 3 chars long.')
        .on(this.todo);

The validate method just calls this.validator.validateObject(this.todo);. As for updateCanSave it updates the canSave property based on the results of the validation:

updateCanSave(validationResults) {
    let valid = true;

    for (let result of validationResults) {
        valid = valid && result.valid;
    }

    this.canSave = valid;
}

And that's it. The main advantage of this method, is that no matter how many fields you have, you don't need extra work. It can also easily be reused for different forms. You can see the full code here (with additional comments) and here (template).

Workaround 3 (how you should do it)

As a follow up to this issue work has been done by Aurelia's contributor Jeremy Danyow so we can execute a callback each time the validator is called. This greatly simplifies the code. You can view the documentation here.

In the constructor, we create the controller with a new validator and register the callback:

constructor(validator, controllerFactory) {
    this.canSave = false;
    this.controller = controllerFactory.createForCurrentScope(validator);
    this.controller.validateTrigger = validateTrigger.changeOrBlur;
    this.controller.subscribe(event => this.validateWhole());
}

The callback passed to this.controller.subscribe will be called each time the validator is run, for reset and validate events. It has one parameter: the event. You can use it to filter by validation type or to get the errors associated with this run. Go here to view the full interface.

Note: We don't need to manually run this.validateWhole manually to initialize canSave correctly. When the form is created and validation is bootstraped, the validator will run with a reset event.

In our case, we want to validate the whole form each time a field is validated so we can update our canSave property:

private validateWhole() {
    this.validator.validateObject(this.todo)
        .then(results => this.canSave = results.every(result => result.valid));
}

And we are done. This is much simplier and shorter that all the other workaround.

Note: Running validation will not display errors messages associated to any field. So even if you validate multiple fields and display error messages for each one, validateWhole will not have an impact.

You can view the full file here and the associated template here.