Aurelia 验证 - 验证失败时未显示任何消息

Question

我一直在研究 Aurelia-Validation 示例，我有以下内容：

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));
}

现在我认为添加 ValidateCustomAttributeViewStrategy 会自动在相关输入字段上填充错误消息，但它似乎没有任何作用。相反，每当我单击提交时，我都会在浏览器控制台中收到 2 个错误 Unhandled promise rejection > ValidationResult。这些会有关系吗？另外，我是否需要向每个输入添加 p 元素以便填充消息，还是应该自动完成？

编辑：我注意到在浏览器控制台中，none 调试消息说 aurelia-validation 插件已经加载。我导航到我的应用程序项目文件夹和 jspm install aurelia-validation，它安装成功。它也出现在我的 config.js 中。它在 jspm_packages/npm/aurelia-validation@0.6.0 中。好像还是不行

Answer 1

我仔细研究了 aurelia-validation 源，发现 ValidateCustomAttributeViewStrategy.TWBootstrapAppendToInput 中唯一提到的是 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。

有一个 pull request 应该合并到 master 分支，但是 Intro.md 仍然包含旧配置。

P.S。您不需要添加 p 元素。这将自动处理。

P.P.S。您还 need to have .catch 来处理调用 validation.validate() 时所有失败的验证。这将防止您在控制台中遇到错误。

Aurelia 验证 - 验证失败时未显示任何消息

Aurelia Validation - no message shown on failed validation

validation

aurelia