Aurelia 验证工作但不显示验证消息答案

【问题标题】：Aurelia validation working but not displaying validation messagesAurelia 验证工作但不显示验证消息
【发布时间】：2026-02-04 14:35:01
【问题描述】：

我有aurelia-validation（版本0.6.3）设置并在调用this.validation.validate().then () => {...}时阻止表单提交，但UI上没有显示验证消息，当字段的值也没有更改也不会在验证阻止表单提交时发生变化，我希望基于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>

模板/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 元素之外进行验证，但这也不起作用。

同样，save 方法中的验证调用按预期工作，验证消息中没有插入任何 <p> 元素。

FWIW，我正在使用the SB Admin 2 Bootstrap theme。我希望这可能会弄乱样式（尽管大多数样式是实际的 Bootstrap 3 样式），但不会阻止 aurelia-validation 将消息插入 DOM...

【问题讨论】：

标签： aurelia

【解决方案1】：

在我看来，aurelia-validation 正在为要验证的当前元素寻找 form-group 类：

https://github.com/aurelia/validation/blob/master/src/strategies/twbootstrap-view-strategy.js#L69

https://github.com/aurelia/validation/blob/master/src/strategies/twbootstrap-view-strategy.js#L16

正如 user5246190 在她的回答中建议的那样，aurelia-validation 正在寻找 Labelelement 但在具有 form-group 类的元素内

【讨论】：

【解决方案2】：

Aurelia 寻找标签元素以在您的视图/UI 上打印验证消息

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

【讨论】：