Question

我设置了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-一般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 ...

Answer 1

Aurelia查找标签元素以在您的视图/用户界面上打印验证消息

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

Answer 2

在我看来，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正在寻找Label元素，但是在具有类form-group的元素

中

Aurelia验证工作但未显示验证消息

2 个答案: