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

本文介绍了Aurelia验证-验证失败时不显示任何消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我一直在研究Aurelia-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));
}

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

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?

我已经在浏览器控制台中注意到，没有任何调试消息说aurelia-validation插件已加载.我导航到我的apps项目文件夹和jspm install aurelia-validation，它已成功安装.它也存在于我的config.js中.它在jspm_packages/npm/[email protected]中.它仍然似乎不起作用

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/[email protected]. It still does not seem to work

Aurelia验证

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

问题描述

推荐答案