Aurelia:标签输出上的触发验证(模糊事件) [英] Aurelia: Trigger Validation on tab-out(blur event)
问题描述
我已经返回了一个验证组来验证我的输入,这些输入触发了提交按钮,我希望通过验证模糊事件来触发相应的验证,而不是全部。
I have returned a validation group to validate my inputs which triggers on submit button and I want to trigger by validation on blur event to trigger respective validation, not all.
例如:
HTML:
<form role="form" submit.delegate="welcome()" validate.bind="validation">
<div class="form-group">
<label for="fn">First Name</label>
<input type="text" value.bind="firstName & updateTrigger:'blur'" class="form-control" id="fn" placeholder="first name" />
<span>${firstName}</span>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
ViewModel中的验证规则:
this.validation = validation.on(this)
.ensure('firstName')
.isNotEmpty()
.hasMinLength(3)
.hasMaxLength(10);
因为我写了 updateTrigger:'blur'
没有任何验证被触发。
Since I have written updateTrigger:'blur'
none of the validation are getting triggered.
删除 updateTrigger:'blur'
所有验证工作正常预期。
Once you remove updateTrigger:'blur'
all the validations are working expected.
要求:
Requirement:
I想要一旦输入框失去焦点(模糊被触发),则触发与'firstname'相关的验证(其他属性的其他验证)。
I want that once the input box loses focus(blur is triggered) then validation(s) related to 'firstname' are triggered no other validation(of other properties).
提前致谢。
推荐答案
现在aurelia-validation alpha支持此功能。看看这篇博文: https://www.danyow.net/aurelia-validation-alpha/
This is now supported in the aurelia-validation alpha. Check out this blog post: https://www.danyow.net/aurelia-validation-alpha/
以下是一个示例: https ://gist.run?id = 381fdb1a4b0865a4c25026187db865ce
Here's an example: https://gist.run?id=381fdb1a4b0865a4c25026187db865ce
registration-form.html
<template>
<require from="./validation-summary.html"></require>
<h1>Register!</h1>
<form submit.delegate="submit()"
validation-renderer="bootstrap-form"
validation-errors.bind="errors">
<validation-summary errors.bind="errors"
autofocus.bind="controller.validateTrigger === 'manual'">
</validation-summary>
<div class="form-group">
<label class="control-label" for="first">First Name</label>
<input type="text" class="form-control" id="first" placeholder="First Name"
value.bind="firstName & validate">
</div>
<div class="form-group">
<label class="control-label" for="last">Last Name</label>
<input type="text" class="form-control" id="last" placeholder="Last Name"
value.bind="lastName & validate">
</div>
<div class="form-group">
<label class="control-label" for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email"
value.bind="email & validate">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" click.delegate="reset()">Reset</button>
</form>
</template>
registration-form.js
import {inject, NewInstance} from 'aurelia-dependency-injection';
import {ValidationController, validateTrigger} from 'aurelia-validation';
import {required, email, ValidationRules} from 'aurelia-validatejs';
@inject(NewInstance.of(ValidationController))
export class RegistrationForm {
@required
firstName = '';
@required
lastName = '';
@required
@email
email = '';
constructor(controller) {
this.controller = controller;
// the default mode is validateTrigger.blur but
// you can change it:
// controller.validateTrigger = validateTrigger.manual;
// controller.validateTrigger = validateTrigger.change;
}
submit() {
let errors = this.controller.validate();
// todo: call server...
}
reset() {
this.firstName = '';
this.lastName = '';
this.email = '';
this.controller.reset();
}
}
这篇关于Aurelia:标签输出上的触发验证(模糊事件)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!