aurelia-validatejs/sample/src/fluent.html

This is a plugin that will allow using validate.js in your Aurelia application for expressive validation.

<template>
  <form class="container">
    <ul class="list-unstyled">
      <li repeat.for="error of errors">
        <span class="text-danger">${error.message}</span>
      </li>
    </ul>
    <div>
      <label class="form-group">
        <strong>First Name</strong>
        <input class="form-control" value.bind="model.firstName & validate" />
      </label>
    </div>
    <div>
      <label class="form-group" with.bind="model">
        <strong>Last Name</strong>
        <input class="form-control" value.bind="lastName & validate" />
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Last Updated</strong>
        <input type="date" class="form-control" value.bind="model.lastUpdated & validate"/>
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Last Time Updated</strong>
        <input type="datetime" class="form-control" value.bind="model.lastTimeUpdated & validate"/>
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Email</strong>
        <input class="form-control" value.bind="model.email & validate"/>
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Password</strong>
        <input type="password" class="form-control" value.bind="model.password & validate"/>
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Confirm Password</strong>
        <input type="password" class="form-control" value.bind="model.confirmPassword & validate"/>
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Website</strong>
        <input class="form-control" value.bind="model.website & validate"/>
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Age</strong>
        <input class="form-control" value.bind="model.age & validate"/>
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Gender</strong>
        <input class="form-control" value.bind="model.gender & validate"/>
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Blue or Red?</strong>
        <input class="form-control" value.bind="model.blueOrRed & validate"/>
      </label>
    </div>
    <div>
      <label class="form-group">
        <strong>Zip Code</strong>
        <input class="form-control" value.bind="model.zipCode & validate"/>
      </label>
    </div>
    <button click.trigger="validate()">Validate</button>
  </form>
</template>