Aurelia validation working but not displaying validation messages

问题

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>

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.

Again, the call to validation in the save method works as expected, no <p> elements are inserted with the validation messages.

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

回答1:

It seems to me that the aurelia-validation is looking for the class form-group for the current element to be validated:

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

As user5246190 suggested in her answer aurelia-validation is looking for a Labelelement but within a element with the class form-group

回答2:

Aurelia Looks For label element to print the validation messages on your View/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>

来源：https://stackoverflow.com/questions/35844923/aurelia-validation-working-but-not-displaying-validation-messages

标签

aurelia