javascript - Validação de campo onBlur com Aurelia

Estou usando Aurelia e Typescript para construir uma página web. Tenho um formulário de login simples e gostaria de validar o e-mail e a senha do usuário.

Estou usando a validação do Aurelia e, por padrão, ela valida o conteúdo do meu input cada vez que ele muda, o que pode ser irritante. (ex: receber uma mensagem de erro dizendo que o email não é válido quando você ainda nem terminou de digitá-lo). Então eu gostaria de fazer a validação no evento onBlur (quando o foco do input é perdido) e quando o usuário clica no botão de Login.

Aqui está meu código:

login.html

<template>
<section>
    <div class="container col-lg-12">
        <div class="col-md-4 col-md-offset-4 centered">
            <h2 t="signin_sign_in"></h2>
            <form role="form" submit.delegate="login()" validate.bind="validation">
                <br if.bind="errors" />
                <div if.bind="errors" repeat.for="error of errors" class="alert alert-danger">
                    <h4 repeat.for="message of error">${message}</h4>
                </div>
                <div class="form-group">
                    <label class="control-label" t="signin_email_address"></label>
                    <input type="text" class="form-control" value.bind="email">
                </div>
                <div class="form-group">
                    <label class="control-label" t="signin_password"></label>
                    <input type="password" class="form-control" value.bind="password">
                </div>
                <button type="submit" class="btn btn-primary" t="signin_sign_in"></button>
            </form>
        </div>
    </div>
</section>
</template>

login.ts

@autoinject()
export class Login {
  email: string;
  password: string;
  router: Router;
  application: ApplicationState;
  accountService: AccountService;
  errors;
  validation;
  i18n: I18N;

constructor(router: Router, application: ApplicationState, accountService: AccountService, validation: Validation, i18n: I18N) {
    this.router = router;
    this.application = application;
    this.accountService = accountService;
    this.i18n = i18n;
    this.errors = [];

    this.validation = validation.on(this)
        .ensure('email')
            .isNotEmpty()
            .isEmail()
        .ensure('password')
            .isNotEmpty()
            .hasLengthBetween(8, 100);
}

navigateToHome(): void {
    this.router.navigate("/welcome");
}

login(): void {
    var __this = this;
    this.validation.validate()
        .then(() => this.accountService.signin(this.email, this.password, this.rememberMe)
            .then(result => {
                // Do stuff
            })
            .catch(error => {
                // Handle error
                }
            }));
}
}

Meu primeiro pensamento foi adicionar

& updateTrigger:'blur':'paste'

para minha vinculação no HTML, mas não funciona. A vinculação é atualizada corretamente quando o foco é perdido, mas a validação para de funcionar. Também não há erro no console de depuração do Chrome.

Alguma ideia de como fazer isso? É possível de todo?

Resposta #1

Recentemente encontrei exatamente esse caso de uso e o resolvi usando o recurso de debounce embutido do Aurelia.

<input type="text" class="form-control" id="email" placeholder="Email" value.bind="email & validateOnChangeOrBlur & debounce:600 ">

600ms é um valor arbitrário, mas você sempre pode ajustá-lo conforme necessário.

Resposta #2

Existem diferentes comportamentos de vinculação que você pode usar para indicar quando a validação deve ser acionada. Você pode ler mais sobre eles na documentação do Aurelia sobre validação.

Dos documentos;

O comportamento de vinculação de validação obedece ao validateTrigger (blur, change, changeOrBlur, manual) do controlador associado. Se você quiser usar um validateTrigger diferente em uma vinculação específica, use um dos seguintes comportamentos de vinculação no lugar de & validate:

& validateOnBlur: o evento blur do DOM aciona a validação.
& validateOnChange: a entrada de dados que altera o modelo aciona a validação.
& validateOnChangeOrBlur: o blur do DOM ou a entrada de dados aciona a validação.
& validateManually: a vinculação não é validada automaticamente quando o elemento associado é desfocado ou alterado pelo usuário.