ensure('bindingPath') should take an optional second parameter that provides settings for this specific binding path.
Examples could be:

• per property debounce time (we could reset default debounce time to a lower value and allow per-property higher debounce times)
• dependencies (allows a property to be re-evaluted if a dependency changes value)
• ...

Having a TS definition makes it easier for the TS lovers to use this plugin.

I have this class

import {Validation} from 'aurelia-validation';
export class SignupModel {
     static inject() { return [Validation]; }
     constructor(validation) {
        console.log(validation); // logs as: undefined
        this.userName = '';
       this.validation = validation.on(this)
            .ensure('userName')
            .isNotEmpty()
            .hasLengthBetween(3, 10);
     }
}

I have also added the plugin to main

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation')
    .plugin('./resources/index'); 

  aurelia.start().then(a => a.setRoot());
}

But not sure why, validation object is undefined in constructor.
Am I missing something?

this.validation = validation.on(this).ensure('firstName').notEmpty()

<div validate.bind="validation">
  <input value.bind="firstName | toUpper" />
</div>

In this scenario,the validateAttachedBehavior does not match the binding path of the input element ('firstName | toUpper') to the binding path of the validation (ensure('firstName')). If the ValidateAttachedBehavior were smart enough to trim out spaces and valueConverters, it would be able to match the two binding paths.

http://aurelia.io/validation/#/form-submission

this example always has the submit button enabled

When I view the page (in Chrome) the submit button is disabled and stays disabled no matter what is in the input box.

The JS files are inconsistent with the rest of aurelia.

Suggestion by @devmondo (moved from old plugin repository):
i dont know if i missed it or it is not there yet, but AJAX validation is really needed, specially for cases where you want to check duplicate username on server in create account scenarios

thanks in advanced.

If you bind to a property on an object the default (bootstrap) view strategy never finds the property for the binding string

e.g.

<input value.bind="someObject.someProperty"></input>

The code in the view strategy only strips the value converters from the binding but doesn't look at the dots

Simple fix would be to strip off anything before the last index of "." in the binding string in the view strategy:

 // Remove any dotted parts to the binding path as the validator deals with just the prop name
 if (bindingPath.indexOf('.') != -1)
     bindingPath = bindingPath.substring(bindingPath.lastIndexOf(".") + 1);

Then it will work a bit nicer for bootstrap out of the box

ReadMe.MD is becoming too large to be useful... tl;dr
Need to split this into a quick 'overview'/'cheat cheat'/'example' page and multiple 'deeper dive' documents/examples...

Properties can be re-evaluated based on dependent properties, this is done using a config callback and calling (config) => {config.computedFrom(['anotherProperty'])}
However, if this property already has an aurelia @computedFrom annotation, this should automatically be picked up.

The validation plugin currently only supports constant tresholds, for example:

this.validation = validation.on(this).ensure('password').isStrongPassword();

We also need to support dynamic values, for example:

this.validation = validation.on(this).ensure('confirmPassword').equals( this.passWord);

I'm attempting to create a custom validation strategy; according to the docs this should be sufficient:

validation.js:

import {ValidateCustomAttributeViewStrategyBase} from 'aurelia-validation';

export class CertChiefViewStrategy extends ValidateCustomAttributeViewStrategyBase {
  constructor() {
    super();
  }

  ...
}

Then configure the app to use the new validation strategy:

import {CertChiefViewStrategy} from './validation';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-animator-css')
    .plugin('aurelia-validation', (config) => {config.useViewStrategy(new CertChiefViewStrategy())})
    .plugin('aurelia-bs-modal');
  aurelia.start().then(a => a.setRoot('app', document.body));
}

However, I get this nice error: Super expression must either be null or a function, not undefined

If I copy the ValidateCustomAttributeViewStrategyBase code into my class, everything is fine. Is this a bug in the validator, framework, loader...?

It would be interested if we could build up a validation configuration based on json-schema. http://json-schema.org/ This is a lower priority than other issues. Just putting it here for a possible future addition.

Would also be handy to ensure fields don't have spaces.

.matches(/^\S*$/); //no spaces

All commit messages need to adhere to the contributing guidelines. Also, each release should be done with the prepare-release gulp test to ensure that the proper change log is generated into the docs folder. The change notes particular to the release should be part of the github release notes. This needs to be done to be consistent with all other Aurelia libraries.

In contrast to #3, we need support to do an ajax call with the entire subject, then have the result 'dictate' the state of the entire validation. This stand-alone or in combination with client-side validation.

The API currently asks some validation rules to be added using functions prefixed by 'is':

• isStrongPassword()
• isAlphanumeric()
• ...

This is inconsistent with the more 'verb-less' validation rules:

• email()
• minLength()
• notEmpty()

TODO: decide on most desired API, then refactor so that they are consistent:

this.validation = validation.on(this)
  .ensure('user.email').email()
  .ensure('user.password').strongPassword();

this.validation = validation.on(this) 
  .ensure('user.email').isEmail()
  .ensure('user.password').isStrongPassword();

Personally I'd prefer the latter: having a 'verb' in each function that indicates a validation rule being executed. This is longer but

• reads more like fluent English in combination with the preceding 'ensure'
• is consistent with verbs in the functions 'passes(customFunction)', 'passesRule(validationRule)'
• shows the contrast with logical operators such as 'if(conditionalExpression)' and 'switch(conditionalExpression)'

Introduction

Validating webforms, response data and other forms of information is a common task. Therefor, I believe it's important to make sure it's easy to do and doesn't cause any performance issues.

NIH?

I'm not sure what Aurelia's policy is on this, but I personal prefer using existing libraries which have proven themselves over time.

A great example of this is chriso's validator (chriso/validator.js). It has built-in string validators and works really well. Sails.js uses it in Anchor (balderdashy/anchor) with added object validation and more.

In comes Aurelia

I'm again not quite sure how Aurelia would like to use this. I think that supplying a common format of using the validator is the way to go. We could then bind objects to the validator, and have them validate when asked.

I have two ideas on how to do this.

Validated entities

We could create the concept of "validated entities". An entity is simply a class with defined rules (properties and their validation and filtering). These entities will be used to construct objects of data, validate the data they hold and return filtered data. This could be useful for validating and filtering responses from API calls, as well as validating and filtering data that is to be sent to an API. An example:

class AbstractEntity {
  validate () { }

  isValid () { }

  getErrors () { }

  setData () { }

  getData (raw) { }
}

export default class UserEntity extends AbstractEntity {
  construct () {
    this.rules = {
      username : {
        type    : 'string',
        required: true,
        regex   : /^[\w\-]{2,14}$/
      },
      password : {
        type : 'string',
        required: true,
      }
    };
  }
}

Library

The other method requires less work, and simply offers validation as an import. The developer uses the library the way he or she wants to without having to follow any conventions.

What do you think?

This is just a quick proposal I wanted to post to start a conversation.

Suggestion: consider properties that have no validation rules to be valid when .checkAll() is called.

Motivation: Suppose there's a contact entity with firstName, lastName, email and notes properties.
Validation is added for firstName, lastName and email.
When the checkAll() is called on the validation, there will be visual feedback that the input fields for firstName, lastName and email are valid/invalid, but there will be no visual feedback that the input field for notes is either valid or invalid.

There are quite some breaking changes according to http://blog.durandal.io/2015/03/25/aurelia-0-10-0-release-status/.
One of them involves the api with which plugins register themselves. There might or might not be other breaking changes as well.

• update to latest version
• add unit tests to the 'loader' mechanism to that future API changes can be tracked automatically, not manually
• fix broken changes

Since aurelia/validation depends on observers, there should be a proper way to clean up (destroy) a validation when it is no longer needed.

The current implementation trims trailing spaces:
" " passes notEmpty(),
" a " passes isMaxLength(2);

Is this behavior even required by anyone?

The framework currently supports model-first: use a fluent API on your model to create the 'validation' object.
We can add custom attributes so that those who want to, can create the 'validation' object completely using attributes.

The validation plugin does it's exports and imports via a validation.js file in the src directory. All other aurelia plugins seem to have an index.js file to do this.

I'm currently doing this:

  @ensure(function(it){
    it.isNotEmpty()
      .hasLengthBetween(3,100);
  })
    name = ''; //needs to be `this.thing.name` somehow

But I need to reference an object like this.thing.name instead. I'm moving the properties of the view model to a single object as children. so instead of name in my view I do thing.name etc. etc.

I can't figure out how to get the @ensure validation to work if I make this change.

When adding validation on an @bindable property, the validation encounters a stack-overflow...

If a userName property is wired up to an AJAX call for validation, we need debouncing, ie not run while the user is typing but only when the user hasn't changed the value for X ms.

Hi,

I'm getting an error with this code:

    this.username = '';
    this.password = '';

    this.validation = validation.on(this)
      .ensure('username')
        .isNotEmpty()
        .withMessage('Username is required')
      .ensure('password')
        .isNotEmpty()
        .withMessage('Password is required');

An error:

inner error: TypeError: Cannot read property 'withMessage' of undefined
    at ValidationRulesCollection.withMessage (http://localhost:1337/jspm/github/aurelia/[email protected]/validation/validation-rules-collection.js:121:66)
    at ValidationGroupBuilder.withMessage (http://localhost:1337/jspm/github/aurelia/[email protected]/validation/validation-group-builder.js:204:47)
    at ValidationGroup.withMessage (http://localhost:1337/jspm/github/aurelia/[email protected]/validation/validation-group.js:299:33)

What am I doing wrong?

Our current I18N implementation relies on keys to be matched to a function. Two of these functions contain logic to return a different translation based on parameters.
Unfortunately, most I18N frameworks, including aurelia's upcoming own I18N implementation, match keys to strings (which allow format parameters).
To make our I18N custom implementation pluggable, aurelia-validation must be refactored so that any logic to pick the right translation based on the situation, is moved outside the I18N classes.

@BWard62 reported there's a nullref exception in older IE versions which are supported by the other aurelia libraries

An alternative to the fluent API is to decorate properties with custom validation decorators

Desired:

this.validation = validation.on(this)
  .ensure('orderItems')
    .minLength(1)
  .ensureForEach('orderItems')
    .ensure('qty')
       .minimumValue(1);
```  .

Discussion

TLDR:

http://yolodev.github.io/mimosa-aurelia-skeleton/#blog/login <- take a look at this (in chrome)
And just hit "login" without typing anything in the inputs
That's handled strictly by the browser
And it's extensible
So you can get your own error messages
There is no js that makes that happen
And the experience is awesome

Also:

Which also, at the same time, prevents the form from being submitted

Currently, all fields are optional. You have to signal every required field using .isNotEmpty().

The inverse should be possible too: all fields are required, dev has to signal optional fields using .canBeEmpty() or .isOptional().

Comments on best API?

All the examples use bootstrap, I am wondering if foundation (zurb) is supported.

Would be nice to have an isUrl validator

I have the following setup using the validation plugin

<form validate.bind="validation" submit.delegate="save()">

     <div class="form-group">
       <input type="text" class="form-control" value.bind="contract.client"/>
     </div>

      <lookup-widget title="Client" placeholder="Find Client..." value.two-way="contract.client"></lookup-widget>

      <button type="submit" class="btn btn-default">Save</button>
    </form>
</template>

When you run the application an error occurs saying "classList is undefined". Going through the validation source in file validate-attached-behavior.js for the function searchFormGroup is assumes the element is a standard HTMLElement however the lookup-widget is a DocumentFragment which has no classList property. I assume because the way the widget is rendered via Aurelia that it's injected as a DocumentFragment.

So replicated steps would be to try and bind a property from a model on a custom widget (attached behaviour) where the property has been marked as to be validated.

this.validation = validation.on(this)
                        .ensure('contract.client').notEmpty()

This plugin is currently loaded (registered with aurelia) in your main.js:

aurelia.plugin('aurelia-validation');

This method actually allows a second parameter, which will then be passed to the plugin's install function.
The idea is to allow the devs to pass a 'configuration callback' function, so that they can do initial configuration of the aurelia-validation plugin right when they register it with aurelia.

for example:

aurelia.plugin('aurelia-validation', (validation) => {
    validation.useLocale('nl-BE')
                   .viewStrategy(validation.viewStrategy.TwitterBootStrap);
});

Is it possible to reset validation? I need to reuse the form after AJAX action.

After installing this plugin with jspm, this adds a line to the config.js naming the plugin as "aurelia/validaton".
However, all other parts of the aurelia bundle are packages referred to as 'aurelia-xxx'.
What do we have to do so that this plugin gets installed correctly as 'aurelia-validation'?

As @jdanyow suggested: One suggestion- I think it would be if the help-text appeared beneath the input element.
=> make different visual settings configurable

Hi, I was chatting with Jeremy Danyow about 'out of the box' validation with Breezejs, similar to the breeze angular validation plugin. Jeremy says it would be cool and suggested I run this past you :-D
Our chat ref:
https://gitter.im/Aurelia/Discuss?at=552fad1d8c86646906dd318e

And the angular validation plugin breeze provide is here:
http://www.getbreezenow.com/documentation/directivesvalidation

Just wondering what your thoughts are? I know the angular breeze validation plugin is extremely popular and would be an awesome plugin for aurelia and I'm sure Ward Bell would be very keen also.

I'm happy to help in any way I can.

Cheers
Paul

Currently config.js references various versions of repos that could potentially be causing conflicts when loading.

Create a working demo so we can show this plugin in action.

Suppose there's an AJAX call to validate a property.
User types "A", AJAX call for "A" is triggered
User types "AB, AJAX call for "AB" is triggered
AJAX call for "AB" finishes early: "AB" is valid.
AJAX call for "A" finishes late: "A" is invalid

Expected result: since the value is 'AB', the property is valid

Actual result: the AJAX call for "A" is the last one to finish and sets the result to invalid

Since the refactoring to make the library async, these errors are all over the console output when running the tests
a) find out if it's in tests only (test infrastructure?)
b) fix it