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