Aurelia验证有效，但不显示验证消息 [英] Aurelia validation working but not displaying validation messages
问题描述
我已设置aurelia-validation(版本0.6.3 )并在调用this.validation.validate().then () => {...}时阻止了表单提交，但是UI上没有显示验证消息，并且当字段的值也不显示更改或验证何时阻止表单提交，我希望根据 Aurelia验证示例
I have aurelia-validation (version 0.6.3) setup and blocking the form submission when calling this.validation.validate().then () => {...}, but no validation message is displayed on the UI, neither when the value of a field changes nor when the validation blocks the form submission, which I would expect based on the Aurelia Validation examples
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());
}
editSku.js
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>
templates/sku-general-tab.html
<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视图上的表单，并且要验证的输入实际上在组合的general-sku-tab视图上.我还尝试过将字段设置为在compose元素之外进行验证，但这也不起作用.
As you can see, I bind the validation to the form on the editSku view, and the input to be validated are actually on the composed general-sku-tab view. I've also tried setting the field to be validated outside of the compose element and that didn't work either.
同样，在save方法中对验证的调用按预期方式进行，没有任何<p>元素与验证消息一起插入.
Again, the call to validation in the save method works as expected, no <p> elements are inserted with the validation messages.
FWIW，我使用的是 SB Admin 2 Bootstrap主题.我希望这可能会弄乱样式(即使大多数样式都是实际的Bootstrap 3样式)，但也不能防止aurelia-validation将消息插入DOM ...
FWIW, I'm using the SB Admin 2 Bootstrap theme. I would expect this to maybe mess up the styling (even though most of the styles are the actual Bootstrap 3 styles), but not to prevent aurelia-validation to insert the messages into the DOM...
推荐答案
在我看来，aurelia验证正在寻找要验证的当前元素的类form-group:
It seems to me that the aurelia-validation is looking for the class form-group for the current element to be validated:
正如user5246190在她的答案中建议的那样，aurelia-validation正在寻找Label元素，但在具有类form-group
As user5246190 suggested in her answer aurelia-validation is looking for a Labelelement but within a element with the class form-group
这篇关于Aurelia验证有效，但不显示验证消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
