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

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

validation aurelia

Validation Aurelia验证-验证失败时未显示任何消息,validation,aurelia,Validation,Aurelia,我一直在研究Aurelia验证示例，我有以下内容： index.html welcome.html 现在我认为添加ValidateCustomAttributeViewStrategy会自动在相关输入字段中填充错误消息，但它似乎没有任何作用。相反，每当我单击submit时，浏览器控制台中就会出现两个错误未处理的承诺拒绝>ValidationResult。这些有关系吗？此外，我是否需要在每个输入中添加p元素以填充消息，还是应该自动完成编辑：我注意到在浏览器控制台中，没有一条调试消息说已经加载

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

index.html

welcome.html

现在我认为添加ValidateCustomAttributeViewStrategy会自动在相关输入字段中填充错误消息，但它似乎没有任何作用。相反，每当我单击submit时，浏览器控制台中就会出现两个错误

未处理的承诺拒绝>ValidationResult

。这些有关系吗？此外，我是否需要在每个输入中添加p元素以填充消息，还是应该自动完成

编辑：我注意到在浏览器控制台中，没有一条调试消息说已经加载了aurelia验证插件。我导航到我的apps项目文件夹并

jspm安装aurelia验证

，它安装成功。它也出现在我的config.js中。它在jspm_包/npm/aurelia中-validation@0.6.0. 它似乎仍然不起作用

我翻了一下aurelia验证源代码，发现唯一提到的

validateCustomAttribute-eviewstrategy.twbootstrapappendotoinput

。此类及其静态成员似乎已重命名。您可以使用的新静态成员是

TWBootstrapViewStrategy.AppendToInput

。可以在

TWBootstrapViewStrategyBase

中找到它

应该合并到主分支，但是Intro.md仍然包含旧的配置

另外，您不需要添加p元素。这将自动处理

p.p.S.调用

validation.validate（）

时，您还可以使用

.catch

来处理所有失败的验证。这将防止您在控制台中遇到错误。

因此，请尝试用TWBootstrapViewStrategy.AppendToInput替换ValidateCustomerButeStrategy.TwBootStrapPendtoInput？是的，这应该会有所帮助。此外，您可以尝试从“aurelia validation”插件初始化中删除配置，以使用default behavior.ah so.plugin（（配置）…等等是吗？应用了这两个修复程序后仍然没有任何结果。我仍然没有看到验证插件加载到协同解决方案中，但我认为肯定是这样，因为单击“提交”将在控制台中引发错误，这只有在以下情况下才会发生。validate.validate（）在welcome.js中返回invalidNot sure。可能还有其他问题……如果您使用的是配置，那么您还需要

从“aurelia validation”导入{TWBootstrapViewStrategy}；

-查看显然修复了文档的pull请求，但看起来Intro.md文件没有更新-

<!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>

<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>

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