concept validation rule in category aurelia

This is an excerpt from Manning's book Aurelia in Action. Login to get full access to this book.

In this section, you’ll add validation to two fields in the my-books edit-book form. Do this by combining Aurelia’s validation plugin (allowing you to create and apply validation rules to input fields) with Bootstrap 4 to display user-friendly validation results with success and error styling. Add the following fields:

The validation controller will execute any defined validation rules automatically based on validation triggers that you configure in the view, but in certain cases you may want to force the validation rules to execute outside of this process. This interaction is depicted in figure 7.8.

Figure 7.8. Validation events can be triggered in Aurelia either by using validation triggers in the view or by explicitly running validation rules from the view-model.

Listing 7.16. Setting up validation rules in EditBook (edit-book.js)

...

@inject(EventAggregator,
           NewInstance.of(ValidationController) )            #1
export class EditBook{

...

ValidationRules.customRule(                                  #2
  'zeroOrPositiveInteger',                                   #2
  (value, obj) => value === null || value === undefined      #3
    || (Number.isInteger(value) || value >= 0),              #3
  'Books can only be read 0 or more times. '
);

ValidationRules
  .ensure(a => a.title).required()                           #4
  .ensure(a => a.timesRead)                                  #5
  .required()                                                #6
  .satisfiesRule('zeroOrPositiveInteger')                    #7
  .on(Book);                                                 #8
}

Now that the validation controller, validation rules, and renderer are in place, it’s time to make use of the validation setup from the edit-book.html view file.