ember-validation-state

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import validationState, { validate } from 'ember-validation-state';
import { task } from 'ember-concurrency-decorators';
import { timeout } from 'ember-concurrency';

const validators = {
  username: [validate('presence', { presence: true })],
  password: [
    validate('length', { min: 8 }), 
    validate('presence', { presence: true })
  ]
};

export default class ApplicationController extends Controller {
	@tracked username = '';
	@tracked password = '';
	@tracked fieldsEntered = 0;

	@validationState(validators) form;

	get enteredAllFields() {
  	return this.fieldsEntered >= 2;
  }

	@action update(field, event) {
  	this[field] = event.target.value;
  }

	@action exitField(field) {
  	this.fieldsEntered++;
  }

	@task 
	*submit(e) {
    e.preventDefault();
    
    if (!this.form.isValid) {
    	return;
    }
    
    yield timeout(1000);
  }
}

templates.application\.hbs

<form style="font-family: sans-serif;" {{on "submit" (perform this.submit)}}>
  <h1 style="font-family: monospace;">ember-validation-state</h1>

  <br>
  <br>
    <div>
    	<label for="username" style="display: block; font-size: 0.875rem;">
      	Username
      </label>
      <input 
      	name="username"
        type="text" 
        {{on "input" (fn this.update "username")}} 
        {{on "focusout" (fn this.exitField "username")}}
        value={{this.username}} 
      />
			{{#if this.enteredAllFields}}
        {{#each this.form.attrs.username.messages as |msg|}}
          <p style="font-size: 0.75rem; color: tomato;">{{msg}}</p>
        {{/each}}
      {{/if}}
    </div>
    <br>
    
    <div>
	    <label for="password" style="display: block; font-size: 0.875rem;">
      	Password
      </label>
      <input 
        type="password"
        name="password"
        {{on "input" (fn this.update "password")}} 
        {{on "focusout" (fn this.exitField "password")}}
        value={{this.password}} 
      />
			{{#if this.enteredAllFields}}
        {{#each this.form.attrs.password.messages as |msg|}}
          <p style="font-size: 0.75rem; color: tomato;">{{msg}}</p>
        {{/each}}
      {{/if}}
    </div>
  <br>
  <br>

  <p>
    The form is 
    {{#if this.form.isValid}}
    	<span style="font-weight: bold; color: darkseagreen;">Valid!</span>
    {{else}}
      <span style="font-weight: bold; color: tomato;">Invalid.</span>
     {{/if}}
  </p>
  
  <button disabled={{this.submit.isRunning}}>
    {{#if this.submit.isRunning}}Submitting...{{else}}Submit{{/if}}
   </button>
</form>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": false
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.18.0",
    "ember-validation-state": "0.0.2",
    "ember-concurrency": "1.1.7",
    "ember-concurrency-decorators": "1.0.0",
    "ember-truth-helpers": "2.0.0"
  }
}