Question

我有以下内容：

欢迎-form.html

<template>
<form  submit.delegate="submit()" role="form" class="form-horizontal" validate.bind="validation">
    <div class="form-group">    
        <label class="control-label col-sm-2" for="firstName">First Name:</label>
        <div class="col-sm-10">
                <input id="firstName" type="text" value.bind="firstName" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="lastName">Last Name:</label>
        <div class="col-sm-10">
            <input id="lastName" type="text" value.bind="lastName" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2">Full Name:</label>
        <div class="col-sm-10">
            <p>${fullName}</p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
            <button click.delegate="toggleSubform()" class="btn btn-default">Advanced</button>
        </div>
    </div>
    <hr class="half-rule">
    <form role="form" class="form-horizontal"
    validate.bind="validation">
    <div class="form-group">
        <label class="control-label col-sm-2" for="email"
        >Email:</label>
        <div class="col-sm-10">
            <input id="emailAddr"class="form-control"
            value.bind="emailAddr">
            <span class="help-block">
                E.g. example@gmail.com
            </span>
        </div>
    </div>
    <div  if.bind="showSub" class="form-group">
        <label class="control-label col-sm-2" for="phone">Phone:</label>
        <div class="col-sm-3">
            <input id="phone" type="tel"
class="form-control" value.bind="phone">
        </div>
        <label class="control-label col-sm-2" for="mobile">Mobile:</label>
        <div class="col-sm-3">
            <input id="mobile" type="tel" class="form-control">
        </div>
    </div>
    <div if.bind="showSub" class="form-group">
        <label class="control-label col-sm-2">Age Group:</label>
        <div class="radio">
            <label><input type="radio" name="age1">18 - 30</label>
        </div>
        <div class="radio col-sm-offset-2">
            <label><input type="radio" name="age1">31-64</label>
        </div>
        <div class="radio col-sm-offset-2">
            <label><input type="radio" name="age1">65+</label>
        </div>
    </div>
    </form>
</form>
</template>

欢迎-form.js

import {Validation} from 'aurelia-validation';
export class WelcomeForm{
static inject() { return [Validation]; }
constructor(validation){
this.firstName ='John';
this.lastName='Doe';
this.emailAddr='';
this.phone='(XXX)XXX-XXXX'
this.showSub = false;

this.validation = validation.on(this)
    .ensure('firstName')
    .isNotEmpty()
    .hasMinLength(3)
    .hasMaxLength(10)
    .containsOnlyAlpha()
    .ensure('lastName')
    .isNotEmpty()
    .hasMinLength(3)
    .hasMaxLength(10)
    .ensure('emailAddr')
    .isNotEmpty()
    .isEmail()
.ensure('phone')
    .isNotEmpty()
    .containsOnlyDigits();
}

get fullName(){
    return `${this.firstName} ${this.lastName}`;
}

submit(){
    this.validation.validate()
        .then( () => {
            alert(`Welcome, ${this.fullName}`);
        });
    }

toggleSubform(){
    this.showSub = !this.showSub;
}
}

任何具有if.bind =“showSub”的div最初都是隐藏的，因为showSub最初设置为false。这些隐藏字段中的一些具有附加到它们的验证，例如， emailAddr输入元素附加了isNotEmpty（）和isEmail（）验证规则。问题是，验证在隐藏字段显示时不起作用，换句话说，当我单击“高级”按钮时，元素会出现，但是当字段无效时，验证消息不会触发。

我尝试从一个或两个div中删除if，当发生这种情况时，验证规则正常;当删除if并输入无效的电子邮件地址格式时，电子邮件字段将显示“不是有效的电子邮件地址”。我知道验证工作正常，因为当我提交时，我在控制台中收到错误。有什么我想念的吗？

Answer 1

答案取决于if.bind的用法。我交换了if.bind for show.bind（因为那是我真正想要的），验证规则现在按预期启动

验证不适用于最初隐藏的div

1 个答案: