Aurelia Validation - no message shown on failed validation

I've been working through the Aurelia-Validation example, and I have the following:

index.html

<!doctype html>
<html>
<head>
    <title>Aurelia</title>
    <link rel="stylesheet"href="styles/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app="main">
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
        System.import('aurelia-bootstrapper');
    </script>
</body>
</html>

welcome.js

import {Validation} from 'aurelia-validation';

export class Welcome{
  static inject() { return [Validation]; }
  constructor(validation) {
    this.heading = 'Welcome to the Aurelia Navigation App!';
    this.firstName = 'John';
    this.lastName = 'Doe';

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

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }  

  welcome() {
    this.validation.validate()//validate will fulfill when validation is valid and reject if not
        .then(  () => {
            alert(`Welcome, ${this.fullName}!`);
    })
        .catch(() => {
            console.log("validation error");
        });
  }
 }

welcome.html

<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="font-awesome/css/font-awesome.css"></require>
<section style="padding-top:2%;">
    <h2 class="text-center">${heading}</h2>
    <form role="form" submit.delegate="welcome()" validate.bind="validation"class="form-horizontal">
    <div class="form-group">    
        <label class="control-label col-sm-2" for="firstName">First Name:</label>
        <p style="help-block aurelia-validation-message"></p>
        <div class="col-sm-10">
                <input id="firstName" type="text" value.bind="firstName" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="lastName">Last Name:</label>
        <div class="col-sm-10">
            <input id="lastName" type="text" value.bind="lastName" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2">Full Name:</label>
        <div class="col-sm-10">
            <p>${fullName}</p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
    </div>
    <hr class="half-rule">
</form> 
</section>
</template>

main.js

import{ValidateCustomAttributeViewStrategy} from 'aurelia-validation';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-validation', (config) =>
{config.useViewStrategy(ValidateCustomAttributeViewStrategy.TWBootstrapAppendToInput);}); //Add this line to load the plugin

  aurelia.start().then(a => a.setRoot('app', document.body));
}

Now I thought that adding the ValidateCustomAttributeViewStrategy would automatically populate error messages on the relevant input field but it doesn't seem to do anything. Instead, whenever I click submit i get 2 errors in the browser console Unhandled promise rejection > ValidationResult. Would these be related? Also, Do I need to add in p elements to each input in order for the messages to populate or should it just be done automatically?

EDIT: I have noticed in the browser console, none of the debug messages say the aurelia-validation plugin has been loaded. I navigated to my apps project folder and jspm install aurelia-validation and it installed successfully. It is also present in my config.js. It is in jspm_packages/npm/aurelia-validation@0.6.0. It still does not seem to work

I dug a bit through aurelia-validation source and found out that the only mention of ValidateCustomAttributeViewStrategy.TWBootstrapAppendToInput is in Intro documentation. This class and their static members seem to be renamed. The new static member you can use instead is TWBootstrapViewStrategy.AppendToInput. It can be found in TWBootstrapViewStrategyBase source code.

There's a pull request for that that that should be merged to master branch, however the Intro.md still contains the old config.

P.S. You don't need to add p elements. That will be handled automatically.

P.P.S. You also need to have .catch to handle all failed validation when calling validation.validate(). That will prevent the error you get in console.

来源：https://stackoverflow.com/questions/33934767/aurelia-validation-no-message-shown-on-failed-validation

标签

validation

aurelia

aurelia-validation