Question

我已将aurelia-validation软件包从0.6.0更新到0.14.0。以前它会在最接近输入字段的标签上显示错误消息。将软件包更新到最新版本后，标签上没有显示错误消息。

 <form id="loginForm" class="form" role="form">
                    <div class="row">
                        <div class="form-group col-md-6">
                            <input class="form-control" value.bind="userName" type="text" id="userName" name="username" t="[placeholder]Account.UserName" />
                            <label t="Account.UserName" for="userName" class="control-label">User Name</label>

                        </div>
                    </div>

                    <div class="row">
                        <div class="form-group col-md-6">
                            <input id="txtPassword" class="form-control" type="password" value.bind="password" name="password" t="[placeholder]Account.Password" />
                            <label for="txtPassword"  t="Account.Password" class="control-label">Password</label>
                        </div>
                    </div>                      
                    <div class="form-group">
                        <button id="btnLogin" class="btn btn-material-teal btn-toolbar" disabled.bind="validationController.errors.length"
                                 click.delegate="login()" t="Account.Login">Log in</button>

                </form>

ValidationRules 。确保（＆＃39;用户名＆＃39）。需要（）。确保（＆＃39;密码＆＃39）。需要（）。对（本）; this.validationController.validate（）。catch（（）=＆gt; {}）;

Answer 1

在Aurelia-Validation文档页面上查看Bootstrap Form Renderer： http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/8

这是在表单上的每个输入元素旁边显示错误的最佳方法。

您需要像这样导入它：

import { inject } from 'aurelia-dependency-injection';
import { ValidationControllerFactory, ValidationRules } from 'aurelia-validation';
import { BootstrapFormRenderer } from '../common/bootstrap-form-renderer';

@inject(ValidationControllerFactory)
export class YourClassName {

  constructor(validationControllerFactory) {
    this.validationCtrl = validationControllerFactory.createForCurrentScope();
    this.validationCtrl.addRenderer(new BootstrapFormRenderer());
  }
}

ValidationRules
  .ensure('fieldname').required()
  .ensure('anotherfield').required.minlength(3).maxlength(20)
  .on(this);

您希望将BootstrapFormRenderer的代码保存在整个应用可以访问的位置，因为您需要将其导入到需要验证的所有视图模型中。

Answer 2

我遇到了同样的问题，他们改变了传递验证信息的方式。

验证的error对象现在是result对象。因此，在您的渲染器中，您必须将error替换为result。

下一个区别在于验证，在先前版本this.controller.validate()中返回array个验证对象，现在它也是result对象，其valid您必须检查的属性。

可以找到更多详细信息here。

aurelia-validation@0.14.0未在UI上显示错误消息

2 个答案: