Aurelia验证正在工作,但不显示验证消息
我已设置了Aurelia验证正在工作,但不显示验证消息,aurelia,Aurelia,我已设置了aurelia validation(版本0.6.3)并在调用this.validation.validate().then()=>{…})时阻止表单提交,但无论是字段值更改还是验证阻止表单提交,UI上都不会显示任何验证消息,这是我所期望的 main.js export function configure(aurelia) { aurelia.use .standardConfiguration() .developmentLogging()
aurelia validation
(版本0.6.3)并在调用this.validation.validate().then()=>{…}
)时阻止表单提交,但无论是字段值更改还是验证阻止表单提交,UI上都不会显示任何验证消息,这是我所期望的
main.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin("aurelia-animator-css", settings => {
settings.duration = 200;
})
.plugin("aurelia-computed")
.plugin("aurelia-dialog", (settings) => {
settings.lock = true;
settings.startingZIndex = 5;
})
.plugin("aurelia-validation", (config) => {
config.useLocale("nl-NL");
})
.feature("components/tinyMCE")
.globalResources("components/typeahead");
aurelia.start().then(() => aurelia.setRoot());
}
import{inject} from "aurelia-framework";
import EditableSku from "../models/editableSku";
import {Validation} from "aurelia-validation";
@inject(Validation)
export class EditSku {
constructor (validation) {
this.validation = {};
this.sku = new EditableSku();
this._setupValidation(validation);
}
save() {
this.validation.validate().then(() => {
// ...work some magic here...
});
}
_setupValidation(validation) {
this.validation = validation.on(this)
.ensure("sku.articleCode")
.isNotEmpty();
}
}
editSku.js
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin("aurelia-animator-css", settings => {
settings.duration = 200;
})
.plugin("aurelia-computed")
.plugin("aurelia-dialog", (settings) => {
settings.lock = true;
settings.startingZIndex = 5;
})
.plugin("aurelia-validation", (config) => {
config.useLocale("nl-NL");
})
.feature("components/tinyMCE")
.globalResources("components/typeahead");
aurelia.start().then(() => aurelia.setRoot());
}
import{inject} from "aurelia-framework";
import EditableSku from "../models/editableSku";
import {Validation} from "aurelia-validation";
@inject(Validation)
export class EditSku {
constructor (validation) {
this.validation = {};
this.sku = new EditableSku();
this._setupValidation(validation);
}
save() {
this.validation.validate().then(() => {
// ...work some magic here...
});
}
_setupValidation(validation) {
this.validation = validation.on(this)
.ensure("sku.articleCode")
.isNotEmpty();
}
}
editSku.html
<template>
<div class="row">
<div class="col-sm-11">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#general-tab" data-toggle="tab">General</a>
</li>
</ul>
</div>
</div>
<form role="form" class="form-horizontal" submit.delegate="save()" validate.bind="validation">
<div class="row">
<div class="col-sm-12">
<div class="tab-content">
<div class="tab-pane active" id="general-tab">
<!-- The field to validate is in this view -->
<compose view="./templates/sku-general-tab.html"></compose>
</div>
</div>
</div>
</div>
<button type="submit" id="save" class="btn btn-primary" disabled.bind="validation.isValidating">Save</button>
</form>
</template>
<template>
<div class="form-group">
<label class="col-sm-1 control-label" for="articleCode">
Article code
</label>
<div class="col-sm-3" show.bind="isNew">
<input type="text" value.bind="sku.articleCode" class="form-control" id="articleCode" name="articleCode" placeholder="Article code">
</div>
</div>
</template>
-
拯救
模板/sku常规选项卡.html
<template>
<div class="row">
<div class="col-sm-11">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#general-tab" data-toggle="tab">General</a>
</li>
</ul>
</div>
</div>
<form role="form" class="form-horizontal" submit.delegate="save()" validate.bind="validation">
<div class="row">
<div class="col-sm-12">
<div class="tab-content">
<div class="tab-pane active" id="general-tab">
<!-- The field to validate is in this view -->
<compose view="./templates/sku-general-tab.html"></compose>
</div>
</div>
</div>
</div>
<button type="submit" id="save" class="btn btn-primary" disabled.bind="validation.isValidating">Save</button>
</form>
</template>
<template>
<div class="form-group">
<label class="col-sm-1 control-label" for="articleCode">
Article code
</label>
<div class="col-sm-3" show.bind="isNew">
<input type="text" value.bind="sku.articleCode" class="form-control" id="articleCode" name="articleCode" placeholder="Article code">
</div>
</div>
</template>
条款代码
如您所见,我将验证绑定到editSku
视图上的表单,要验证的输入实际上位于组合的generalsku选项卡
视图上。我还尝试将字段设置为在compose
元素之外进行验证,但这也不起作用
同样,在save
方法中对验证的调用按预期工作,验证消息中没有插入
元素
FWIW,我在用。我认为这可能会打乱样式设置(即使大多数样式都是实际的Bootstrap 3样式),但不会阻止aurelia验证将消息插入DOM…aurelia查找标签元素以在视图/UI上打印验证消息
在我看来,aurelia验证正在为要验证的当前元素寻找类表单组
:
正如user5246190在她的回答中所建议的那样,aurelia validation正在寻找一个标签
元素,但是在一个元素中,它的类是表单组
<div class="form-group fg-float fg-line" show.bind="isNew">
<input type="text" class="input-sm form-control fg-input" dvalue.bind="sku.articleCode" class="form-control" id="articleCode" name="articleCode" placeholder="Article code">
<label class="fg-label"></label>
</div>