Aurelia: Trigger Validation on tab-out(blur event)

Question

I have returned a validation group to validate my inputs which triggers on submit button and I want to trigger by validation on blur event to trigger respective validation, not all.

For example:

HTML:

<form role="form" submit.delegate="welcome()" validate.bind="validation">
    <div class="form-group">
        <label for="fn">First Name</label>
        <input type="text" value.bind="firstName & updateTrigger:'blur'" class="form-control" id="fn" placeholder="first name" />
        <span>${firstName}</span>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

Validation Rule in ViewModel:

this.validation = validation.on(this)
        .ensure('firstName')
        .isNotEmpty()
        .hasMinLength(3)
        .hasMaxLength(10);

Since I have written updateTrigger:'blur' none of the validation are getting triggered.

Once you remove updateTrigger:'blur' all the validations are working expected.

Requirement:

I want that once the input box loses focus(blur is triggered) then validation(s) related to 'firstname' are triggered no other validation(of other properties).

Thanks in advance.

Answer 1

This is now supported in the aurelia-validation alpha. Check out this blog post: https://www.danyow.net/aurelia-validation-alpha/

Here's an example: https://gist.run?id=381fdb1a4b0865a4c25026187db865ce

registration-form.html

<template>
  <require from="./validation-summary.html"></require>

  <h1>Register!</h1>

  <form submit.delegate="submit()"
        validation-renderer="bootstrap-form"
        validation-errors.bind="errors">

    <validation-summary errors.bind="errors"
                        autofocus.bind="controller.validateTrigger === 'manual'">
    </validation-summary>

    <div class="form-group">
      <label class="control-label" for="first">First Name</label>
      <input type="text" class="form-control" id="first" placeholder="First Name"
             value.bind="firstName & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="last">Last Name</label>
      <input type="text" class="form-control" id="last" placeholder="Last Name"
             value.bind="lastName & validate">
    </div>

    <div class="form-group">
      <label class="control-label" for="email">Email</label>
      <input type="email" class="form-control" id="email" placeholder="Email"
             value.bind="email & validate">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
    <button type="button" class="btn btn-default" click.delegate="reset()">Reset</button>
  </form>
</template>

registration-form.js

import {inject, NewInstance} from 'aurelia-dependency-injection';
import {ValidationController, validateTrigger} from 'aurelia-validation';
import {required, email, ValidationRules} from 'aurelia-validatejs';

@inject(NewInstance.of(ValidationController))
export class RegistrationForm {
  @required
  firstName = '';

  @required
  lastName = '';

  @required
  @email
  email = '';

  constructor(controller) {
    this.controller = controller;

    // the default mode is validateTrigger.blur but 
    // you can change it:
    // controller.validateTrigger = validateTrigger.manual;
    // controller.validateTrigger = validateTrigger.change;
  }

  submit() {
    let errors = this.controller.validate();
    // todo: call server...
  }

  reset() {
    this.firstName = '';
    this.lastName = '';
    this.email = '';
    this.controller.reset();
  }
}

Answer 2

Aurelia's validation was updated in late 2016 to include a changeOrBlur validateTrigger option, which in my opinion should be the new default. Here's how to use it:

constructor(controller) {
  this.controller = controller;
  controller.validateTrigger = validateTrigger.changeOrBlur;

    // controller.validateTrigger = validateTrigger.blur; (default)
    // controller.validateTrigger = validateTrigger.change;
    // controller.validateTrigger = validateTrigger.changeOrBlur;
    // controller.validateTrigger = validateTrigger.manual;
}