Today we've got the initial releases of our new validation overhaul as well as the first release of some new testing capabilities. As usual, we've got a bunch of additional bug fixes and enhancements to performance as well. Read on for the details.

A New Validation Library

As mentioned above, we've been working on a new approach to validation for Aurelia. This approach would allow any validation library to be used and combined with any CSS framework. It simplifies validation mechanics while opening up tremendous flexibiity. To tell you a bit about it, I'll let core team member Patrick Walters take it from here.

I've been contributing for a while now to some of the core Aurelia plugin libraries. With our Validation library, we realized there were some changes that needed to be made. Unfortunately, fixing things required a re-write but it also provided an opportunity to really refine the concepts and implementations.

I worked heavily with Jeremy Danyow on this and we tried to find the best way to represent validation in an Aurelia plugin. Instead of starting fresh with a new validation runtime we chose to start with a popular server/browser pure validation library called validate.js. Validate.js has been a great library to work with. I've really enjoyed how fluid and clean setting up validation has been and I'm happy to say that our validation integration makes it even nicer.

Technical Requirements for Validation

We had a few simple requirements from the beginning. Here's a summary:

Must run on server (node.js) and browser. Use existing pure validation library. Installable as an Aurelia plugin.

You can read about more of the technical requirements here .

Today's Alpha Release

I think we are at a point where we want to get heavy user feedback on the new validation system, so as of today you can install the alpha release:

If you are using JSPM:

$ jspm install aurelia - validatejs

If you are using NPM:

$ npm install aurelia - validatejs -- save

Once the package is installed, then install the plugin in your main.js configure method:

export function configure ( aurelia ) { aurelia . use . standardConfiguration ( ) . plugin ( 'aurelia-validatejs' ) ; aurelia . start ( ) . then ( ( ) => aurelia . setRoot ( ) ) ; }

Applying Validation with Decorators

Once the plugin is installed, you can use it in your models and view-models with decorators:

import { required } from 'aurelia-validatejs' ; export class MyModel { @required name = '' ; }

Notice that name on instances of MyModel will be required.

Applying Validation with the Fluent API

If you prefer not to use decorators (or can't), you can also use the fluent API as well:

import { Validator } from 'aurelia-validatejs' ; export class Fluent { static inject = [ Validator ] ; constructor ( validator ) { this . model = new AnotherModel ( ) ; this . validator = validator . ensure ( this . model , 'firstName' ) . required ( ) . length ( { minimum : 3 , maximum : 10 } ) . ensure ( this . model , 'lastName' ) . required ( ) ; } }

Note that both the decorator and fluent API take the exact same configuration options.

Displaying Errors

Currently, to display errors you can use the ValidateBindingBehavior which watches for changes to the validation properties of the object and uses a ValidationRenderer to show them. We would like some feedback on the setup so try it out and let us know what you think.

Use the validate binding behavior in your HTML to show errors like this:

< template > < form class = " container " > < div > < label class = " form-group " > < strong > Name </ strong > < input class = " form-control " value.bind = " model.name & validate " /> </ label > </ div > </ form > </ template >

By default, the renderer uses the standard Bootstrap error formatting.

ValidationReporter

In your view-model code you can watch for errors emitted by the error reporter:

import { required , ValidationEngine } from 'aurelia-validatejs' ; export class MyModel { @required name = '' ; } export class MyViewModel { constructor ( ) { this . model = new MyModel ( ) ; this . reporter = ValidationEngine . getValidationReporter ( this . model ) ; this . reporter . subscribe ( result => { } ) ; } }

What's Next?

Weekly Releases

This first release is to get some initial feedback. Next week we plan to release on Tuesday with some nice improvements in renderers. Right now, for example we are inferring the reporter from the binding engine but we have some planned improvements for the coming week. We hope to continue iteratively releasing improvements and welcome community contribution.

More Complex Renderers

We plan to add more complex renderers soon. We will include mechanisms for showing validation errors on forms as well as ones that are scoped to the current element. We definitely want to welcome community contributions to enable rendering in other scenarios besides the default Bootstrap ones. Building renderers are really simple and we'll have more information on that soon.

Feedback

In the repository for the validate.js bridge you can track issues or provide feedback. We've added a new tag contribution-welcome to indicate that a particular piece of the code-base is stable and contributions are welcome. You'll also note that we've added some initial issues to indicate what we have planned already.

How can you contribute?

I've put together another blog post detailing how validation is currently structured to give others an idea of how things currently work and what we can do to improve validation as we go forward.

Here are some ways to get started contributing if you are interested:

Bug repros / fixes Unit test coverage Add TypeScript types Documentation Descriptive errors (I'd like for errors to have links to trouble-shooting sections of docs for developers) Make it work with other CSS libraries

Custom Renderer

Here's a few tips on creating a custom renderer to try out with your CSS framework of choice:

validate-binding-behavior.js currently gets the renderer from validation-renderer.js . To try out your own renderer you can simply copy the validate-binding-behavior and update the name. Change the import to a renderer of your choosing (follow the same patterns in validation-renderer.js of renderErrors / unrenderErrors method signatures for now). We'll have improvements to this and more information soon.

Thanks again for everyone's patience and help! Please report any issues you are having!

As you can see, Patrick has been busy working on the new validation library. I'm excited about what is going to be possible and I hope you'll try it out and help us fill in the missing pieces.