使用Aurelia对Blur进行现场验证

Question

I'm using Aurelia and Typescript to build a web page. I have a simple login form and I'd like to validate the user email and password.

I am using Aurelia validation and by default it validates the content of my input each time it changes, which can be annoying. (ex: getting an error message saying that the email is not valid when you're not even done typing it). So I'd like to do the validation onBlur instead (when the focus on the input is lost) and when the user clicks on the Login button.

Here's my code:

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
                }
            }));
}
}

My first thought was to add

& updateTrigger:'blur':'paste'

to my binding in the HTML, but it doesn't work. The binding is updated correctly when focus is lost but the validation stops working. There's no error in the Chrome debug console either.

Any idea on how to do this? Is is possible at all?

Answer 1

There's different binding behaviours you can use to tell when the validation should trigger. You can read more about them in the Aurelia docs on validation .

From the docs;

The validate binding behavior obeys the associated controller's validateTrigger (blur, change, changeOrBlur, manual). If you'd like to use a different validateTrigger in a particular binding use one of the following binding behaviors in place of & validate:

& validateOnBlur: the DOM blur event triggers validation.
& validateOnChange: data entry that changes the model triggers validation.
& validateOnChangeOrBlur: DOM blur or data entry triggers validation.
& validateManually: the binding is not validated automatically when the associated element is blurred or changed by the user.

Answer 2

I recently encountered this exact use case and I solved it using Aurelia's built in debounce feature.

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

600ms is an arbitrary value, but you can always play around with it as needed.